微信小程序封装loading 修改

1.  custom-loading.vue

<template>
  <view v-if="visible" class="custom-loading-mask" @touchmove.stop.prevent>
    <view class="custom-loading-container">
      <!-- 动态点点 -->
      <text class="loading-text">{{ text }}{{ dots }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    text: {
      type: String,
      default: '加载中'
    }
  },
  data() {
    return {
      dots: '',
      timer: null
    }
  },
  mounted() {
    this.startAnimation()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startAnimation() {
      this.timer = setInterval(() => {
        this.dots = this.dots.length >= 3 ? '' : this.dots + '.'
      }, 500)
    }
  }
}
</script>

<style scoped>
/* 保持相同的容器样式 */
.custom-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-loading-container {
  background-color: #2e2e2e;
  color: #fff;
  border-radius: 8px;
  padding: 24px 32px;
  min-width: 120px;
  text-align: center;
}

.loading-text {
  font-size: 16px;
  color: #fff;
}
</style>

2.loading.js  

import Vue from 'vue'
import CustomLoading from './custom-loading.vue'

const LoadingConstructor = Vue.extend(CustomLoading)
let loadingInstance = null

export const showLoading = (options = {}) => {
  if (loadingInstance) return
  
  loadingInstance = new LoadingConstructor({
    el: document.createElement('div'),
    propsData: {
      visible: true,
      text: options.text || '加载中...',
      color: options.color || '#1e7061'
    }
  })
  
  document.body.appendChild(loadingInstance.$el)
  
  // 超时自动关闭
  if (options.timeout) {
    setTimeout(() => {
      hideLoading()
    }, options.timeout)
  }
}

export const hideLoading = () => {
  if (loadingInstance) {
    loadingInstance.visible = false
    setTimeout(() => {
      if (loadingInstance.$el && loadingInstance.$el.parentNode) {
        loadingInstance.$el.parentNode.removeChild(loadingInstance.$el)
      }
      loadingInstance.$destroy()
      loadingInstance = null
    }, 300)
  }
}

// 全局混入
Vue.mixin({
  methods: {
    $showLoading(options) {
      showLoading(options)
    },
    $hideLoading() {
      hideLoading()
    }
  }
})

3.引用

<CustomLoading :visible="isLoading" text="正在上传图片..." />

    import CustomLoading from '@/workpages/components/custom-loading.vue'