index.vue
1.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
<section class="full-loading" :class="{ absolute }" v-show="loading" :style="getStyle">
<Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
</section>
</template>
<script lang="ts">
import { computed, CSSProperties, PropType } from 'vue';
import { defineComponent } from 'vue';
import { Spin } from 'ant-design-vue';
import { SizeEnum } from '/@/enums/sizeEnum';
import { ThemeEnum } from '/@/enums/appEnum';
export default defineComponent({
name: 'Loading',
components: { Spin },
props: {
tip: {
type: String as PropType<string>,
default: '',
},
size: {
type: String as PropType<SizeEnum>,
default: SizeEnum.LARGE,
validator: (v: SizeEnum): boolean => {
return [SizeEnum.DEFAULT, SizeEnum.SMALL, SizeEnum.LARGE].includes(v);
},
},
absolute: {
type: Boolean as PropType<boolean>,
default: false,
},
loading: {
type: Boolean as PropType<boolean>,
default: false,
},
background: {
type: String as PropType<string>,
},
theme: {
type: String as PropType<'dark' | 'light'>,
default: 'light',
},
},
setup(props) {
const getStyle = computed(
(): CSSProperties => {
const { background, theme } = props;
const bgColor = background
? background
: theme === ThemeEnum.DARK
? 'rgba(0, 0, 0, 0.2)'
: 'rgba(240, 242, 245, 0.4)';
return { background: bgColor };
}
);
return { getStyle };
},
});
</script>
<style lang="less" scoped>
.full-loading {
position: fixed;
top: 0;
left: 0;
z-index: 200;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
&.absolute {
position: absolute;
top: 0;
left: 0;
z-index: 300;
}
}
</style>