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 = nullexport const showLoading = (options = {}) => {if (loadingInstance) returnloadingInstance = 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 = falsesetTimeout(() => {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.引用

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