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
| <template>
| <transition name="el-loading-fade" @after-leave="handleAfterLeave">
| <div
| v-show="visible"
| class="el-loading-mask"
| :style="{ backgroundColor: background || '' }"
| :class="[customClass, { 'is-fullscreen': fullscreen }]">
| <div class="el-loading-spinner">
| <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
| <circle class="path" cx="50" cy="50" r="20" fill="none"/>
| </svg>
| <i v-else :class="spinner"></i>
| <p v-if="text" class="el-loading-text">{{ text }}</p>
| </div>
| </div>
| </transition>
| </template>
|
| <script>
| export default {
| data() {
| return {
| text: null,
| spinner: null,
| background: null,
| fullscreen: true,
| visible: false,
| customClass: ''
| };
| },
|
| methods: {
| handleAfterLeave() {
| this.$emit('after-leave');
| },
| setText(text) {
| this.text = text;
| }
| }
| };
| </script>
|
|
