vben
authored
|
1
|
<template>
|
vben
authored
|
2
|
<PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
|
Vben
authored
|
3
4
5
6
7
8
|
<div ref="wrapEl">
<a-alert message="组件方式" />
<a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
全屏 Loading
</a-button>
<a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
|
|
9
10
11
12
13
14
15
|
<Loading
:loading="loading"
:absolute="absolute"
:theme="theme"
:background="background"
:tip="tip"
/>
|
vben
authored
|
16
|
|
Vben
authored
|
17
|
<a-alert message="函数方式" />
|
vben
authored
|
18
|
|
Vben
authored
|
19
20
21
22
|
<a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">
全屏 Loading
</a-button>
<a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
|
vben
authored
|
23
|
|
Vben
authored
|
24
25
26
27
28
|
<a-alert message="指令方式" />
<a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
打开指令Loading
</a-button>
</div>
|
vben
authored
|
29
|
</PageWrapper>
|
vben
authored
|
30
31
32
33
|
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { Loading, useLoading } from '/@/components/Loading';
|
vben
authored
|
34
|
import { PageWrapper } from '/@/components/Page';
|
vben
authored
|
35
|
import { Alert } from 'ant-design-vue';
|
vben
authored
|
36
|
|
vben
authored
|
37
|
export default defineComponent({
|
vben
authored
|
38
|
components: { Loading, PageWrapper, [Alert.name]: Alert },
|
vben
authored
|
39
40
41
42
43
44
45
|
setup() {
const wrapEl = ref<ElRef>(null);
const loadingRef = ref(false);
const compState = reactive({
absolute: false,
loading: false,
|
|
46
47
|
theme: 'dark',
background: 'rgba(111,111,111,.7)',
|
vben
authored
|
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
tip: '加载中...',
});
const [openFullLoading, closeFullLoading] = useLoading({
tip: '加载中...',
});
const [openWrapLoading, closeWrapLoading] = useLoading({
target: wrapEl,
props: {
tip: '加载中...',
absolute: true,
},
});
function openLoading(absolute: boolean) {
compState.absolute = absolute;
compState.loading = true;
setTimeout(() => {
compState.loading = false;
}, 2000);
}
function openCompFullLoading() {
openLoading(false);
}
function openCompAbsolute() {
openLoading(true);
}
function openFnFullLoading() {
openFullLoading();
setTimeout(() => {
closeFullLoading();
}, 2000);
}
function openFnWrapLoading() {
openWrapLoading();
setTimeout(() => {
closeWrapLoading();
}, 2000);
}
function openDirectiveLoading() {
loadingRef.value = true;
setTimeout(() => {
loadingRef.value = false;
}, 2000);
}
return {
openCompFullLoading,
openFnFullLoading,
openFnWrapLoading,
openCompAbsolute,
wrapEl,
loadingRef,
openDirectiveLoading,
...toRefs(compState),
};
},
});
</script>
|