antdesignvue vue3全局loading

这里封装为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 = true
                    this.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()

希望朋友们多多关照