mkm/company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refer: 优化加载组件

Browse Source
This commit is contained in:
zhangziyu 2023-08-21 15:33:15 +08:00
parent f7b3429113
commit 431594128f
1 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Loading/Loading.vue
View File

@ -1,5 +1,8 @@
<script setup>
</script>
<template> <template>
<div class="bytedanceLoading"> <div id="loading" class="bytedanceLoading">
<div class="bytedanceLoading__wrapper"> <div class="bytedanceLoading__wrapper">
<!-- <div class="bytedanceLoading__background"></div> --> <!-- <div class="bytedanceLoading__background"></div> -->
<div class="bytedanceLoading__inner"> <div class="bytedanceLoading__inner">
@ -12,33 +15,7 @@
</div> </div>
</template> </template>
<script setup> <style lang="less" scoped>
import {getCurrentInstance, ref} from "vue";
const {proxy} = getCurrentInstance()
const fullscreen = ref(true)
const lock = ref(false)
const emit = defineEmits(['destroy'])
const close = () => {
proxy.$el.remove()
emit('destroy')
}
</script>
<style lang="less">
.directiveLoading {
&-parent {
position: relative;
&-visible {
// max-height: 100vh !important;
// overflow: hidden;
// min-height: 500px !important;
}
}
}
</style>
<style lang="less">
@height: 10px; @height: 10px;
@duration: 400ms; @duration: 400ms;
@itemWidth: 9px; @itemWidth: 9px;
@ -57,7 +34,19 @@ const close = () => {
transform: translate3d(0, @height, 0); transform: translate3d(0, @height, 0);
} }
} }
#loading {
display: none;
}
.directiveLoading {
&-parent {
position: relative;
&-visible {
// max-height: 100vh !important;
// overflow: hidden;
// min-height: 500px !important;
}
}
}
.bytedanceLoading { .bytedanceLoading {
position: absolute; position: absolute;
left: 0; left: 0;
@ -73,9 +62,15 @@ const close = () => {
position: fixed !important; position: fixed !important;
} }
&__wrapper {
height: 100%;
}
&__inner { &__inner {
display: flex; display: flex;
height: 20px; justify-content: center;
align-items: center;
height: 100%;
&-item { &-item {
width: @itemWidth; width: @itemWidth;
margin: 0 @doubleHorizontalSpace; margin: 0 @doubleHorizontalSpace;