1 | <template>
|
2 | <div>
|
3 | <template v-if="uiLoading">
|
4 | <div :class="['el-skeleton', animated ? 'is-animated' : '', ]" v-bind="$attrs">
|
5 | <template v-for="i in count">
|
6 | <slot v-if="loading" name="template">
|
7 | <el-skeleton-item
|
8 | v-for="item in rows"
|
9 | :key="`${i}-${item}`"
|
10 | :class="{
|
11 | 'el-skeleton__paragraph': item !== 1,
|
12 | 'is-first': item === 1,
|
13 | 'is-last': item === rows && rows > 1,
|
14 | }"
|
15 | variant="p"
|
16 | />
|
17 | </slot>
|
18 | </template>
|
19 | </div>
|
20 | </template>
|
21 | <template v-else>
|
22 | <slot v-bind="$attrs"></slot>
|
23 | </template>
|
24 | </div>
|
25 | </template>
|
26 | <script>
|
27 | export default {
|
28 | name: 'ElSkeleton',
|
29 | props: {
|
30 | animated: {
|
31 | type: Boolean,
|
32 | default: false
|
33 | },
|
34 | count: {
|
35 | type: Number,
|
36 | default: 1
|
37 | },
|
38 | rows: {
|
39 | type: Number,
|
40 | default: 4
|
41 | },
|
42 | loading: {
|
43 | type: Boolean,
|
44 | default: true
|
45 | },
|
46 | throttle: {
|
47 | type: Number,
|
48 | default: 0
|
49 | }
|
50 | },
|
51 | watch: {
|
52 | loading: {
|
53 | handler(loading) {
|
54 | if (this.throttle <= 0) {
|
55 | this.uiLoading = loading;
|
56 | return;
|
57 | }
|
58 | if (loading) {
|
59 | clearTimeout(this.timeoutHandle);
|
60 | this.timeoutHandle = setTimeout(() => {
|
61 | this.uiLoading = this.loading;
|
62 | }, this.throttle);
|
63 | } else {
|
64 | this.uiLoading = loading;
|
65 | }
|
66 | },
|
67 | immediate: true
|
68 | }
|
69 | },
|
70 | data() {
|
71 | return {
|
72 | uiLoading: this.throttle <= 0 ? this.loading : false
|
73 | };
|
74 | }
|
75 | };
|
76 | </script>
|