ant design vue全局loading

1.封装loading (SpinLoader.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) // 清除定时器
                    this.show = false
                }
            },
            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()
    }
}

2.页面使用代码

import Spin from '@/components/antAssembly/SpinLoader'


以下是两种，可设置默认时间
// Spin.show('Loading...', 2000)
Spin.show('Loading...')
Spin.hide()