loading-view.vue 759 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view :class="'loading ' + ( type == 'flex' ? 'flex' : '' )" :style="{backgroundColor, }">
  3. <u-loading mode="flower" :size="60"></u-loading>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {};
  10. },
  11. props: {
  12. type: {
  13. type: String,
  14. default: 'fixed'
  15. },
  16. backgroundColor: {
  17. type: String,
  18. default: '#fff'
  19. }
  20. },
  21. methods: {}
  22. };
  23. </script>
  24. <style lang="scss" scoped>
  25. .loading {
  26. position: fixed;
  27. top: 0;
  28. left: 0;
  29. width: 100vw;
  30. height: 100vh;
  31. z-index: 9999;
  32. display: flex;
  33. justify-content: center;
  34. align-items: center;
  35. }
  36. .loading.flex {
  37. position: static;
  38. flex: 1;
  39. width: 100%;
  40. }
  41. .loading {
  42. .loading-img {
  43. width: 100rpx;
  44. height: 100rpx;
  45. }
  46. }
  47. </style>