5d1b1f56b324693f244b7a5b61eadb8bb2faa3ae84fbc9a0d6dfab29443d8f297b607cb098e1ab70198357f75a980b8f6893a4d822d381b27c93906e1887b0 984 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  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. <script>
  19. export default {
  20. data() {
  21. return {
  22. text: null,
  23. spinner: null,
  24. background: null,
  25. fullscreen: true,
  26. visible: false,
  27. customClass: ''
  28. };
  29. },
  30. methods: {
  31. handleAfterLeave() {
  32. this.$emit('after-leave');
  33. },
  34. setText(text) {
  35. this.text = text;
  36. }
  37. }
  38. };
  39. </script>