供应链b2b平台_徐州市建筑工程交易网_下载微信_网站模板之家官网

这里封装为loading.js文件，代码赋值即可用

import { createApp, h } from 'vue'
import { Spin } from 'ant-design-vue'let instance = null// 定义全屏遮罩样式
const style = {position: 'fixed',left: 0,top: 0,width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',background: 'rgba(0, 0, 0, .5)',zIndex: 99999
}function getInstance () {if (!instance) {const vn = createApp({data () {return {show: false,message: 'Loading...',timeoutId: 'loader'}},unmounted () {if (instance && instance.$el) {instance.$el.remove() // 当组件卸载时，从DOM中移除元素以避免内存泄漏}},methods: {loading (val, timeout) {this.show = truethis.message = val || 'Loading...'if (timeout) {this.timeoutId = setTimeout(() => {this.close()}, timeout) // 超时时间单位为毫秒}},close () {clearTimeout(this.timeoutId) // 清除定时器setTimeout(()=>{this.show = false},1000)}},render () {return this.show? h('div', { style }, [h(Spin, { tip: this.message })]): null}})const ele = document.createElement('div')instance = vn.mount(ele)document.body.appendChild(ele)}return instance
}export default {...Spin,show (val, timeout) {getInstance().loading(val, timeout)},hide () {getInstance().close()}
}

封装完成后，可以再其他页面引入
import Spin from ‘./SpinLoader’

Spin.show(‘Loading…’,‘这里可以设置时间例如（1000，或者 ，2000之类的）’)

关闭loading
Spin.hide()

希望朋友们多多关照