1 | <template>
|
2 | <transition name="el-loading-fade" @after-leave="handleAfterLeave">
|
3 | <div
|
4 | v-show="visible"
|
5 | class="el-loading-mask"
|
6 | :style="{ backgroundColor: background || '' }"
|
7 | :class="[customClass, { 'is-fullscreen': fullscreen }]">
|
8 | <div class="el-loading-spinner">
|
9 | <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
|
10 | <circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
11 | </svg>
|
12 | <i v-else :class="spinner"></i>
|
13 | <p v-if="text" class="el-loading-text">{{ text }}</p>
|
14 | </div>
|
15 | </div>
|
16 | </transition>
|
17 | </template>
|
18 |
|
19 | <script>
|
20 | export default {
|
21 | data() {
|
22 | return {
|
23 | text: null,
|
24 | spinner: null,
|
25 | background: null,
|
26 | fullscreen: true,
|
27 | visible: false,
|
28 | customClass: ''
|
29 | };
|
30 | },
|
31 |
|
32 | methods: {
|
33 | handleAfterLeave() {
|
34 | this.$emit('after-leave');
|
35 | },
|
36 | setText(text) {
|
37 | this.text = text;
|
38 | }
|
39 | }
|
40 | };
|
41 | </script>
|