ant design vue全局loading

最新推荐文章于 2025-06-30 09:07:45 发布

Allen·赵

最新推荐文章于 2025-06-30 09:07:45 发布

阅读量2.5k

点赞数 10

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/135254975

文章介绍了如何在Vue应用中使用AntDesignVue库的Spin组件封装成一个全屏遮罩Loading指示器，包括组件的创建、显示和隐藏方法，以及如何处理组件生命周期以避免内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()