1234567891011121314151617181920212223242526272829303132333435363738394041 |
- <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>
|