vue全局弹窗实现

最新推荐文章于 2025-10-11 19:45:00 发布

原创最新推荐文章于 2025-10-11 19:45:00 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于Vue的弹窗组件实现，通过单例模式确保弹窗实例的唯一性，并利用Vue的生命周期钩子和DOM操作实现了弹窗的动态显示与隐藏。组件支持参数传递，便于复用。

main.vue

<template>
    <div v-show="show" class="message">
        <h2>title</h2>
        <div>
            <button @click="handleConfirm">确认<button>
            <button @click="handleConfirm">取消</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
            }
        },
        methods: {
            handleConfirm() {
                this.show = false
            }
        },
    }
</script>

<style>
    .message {
        width: 300px;
        height: 300px;
    }
</style>

main.js

import Vue from 'vue';
import Main from './main.vue';

const MainConstructor = Vue.extend(Main)
let instance // 单例模式

const Message = () => {
    if(!instance) {
        instance = new MainConstructor().$mount()
        // instance.show = true
        document.body.appendChild(instance.$el)
    } else {
        
    }
    instance.show = true

}

export default Message // 第一次调用Message()会把弹窗挂载到body上，后面再调用的时候直接让弹窗显示，可以传递参数，instance.show或instance.$data.show访问data数据

参考：

element： https://github.com/ElemeFE/element/blob/dev/packages/message/src/main.js

$mounted()： https://cn.vuejs.org/v2/api/#vm-mount

$el: https://cn.vuejs.org/v2/api/#vm-el