index.vue 610 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <view class="loading-body">
  3. <slot></slot>
  4. <view class="mask" v-if="loading">
  5. <u-loading mode="circle"></u-loading>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. name: 'ComponentLoading',
  12. props: {
  13. loading: {
  14. type: Boolean,
  15. default: false
  16. }
  17. }
  18. }
  19. </script>
  20. <style lang="scss" scoped>
  21. .loading-body {
  22. position: relative;
  23. .mask {
  24. position: absolute;
  25. top: 0;
  26. left: 0;
  27. width: 100vw;
  28. height: 100vh;
  29. background-color: rgba(0, 0, 0, 0.5);
  30. display: flex;
  31. justify-content: center;
  32. align-items: center;
  33. z-index: 9999;
  34. }
  35. }
  36. </style>