首页 > 其他分享> 文章详细

Vue3 制作一个自定义的弹框插件

2021-07-22 15:04:48 阅读：442 来源： 互联网

标签：插件 container 自定义 style 弹框 options dialog any

　　在我们的网页界面上总是需要制作一些二级面板或者弹框提示的东西，这里自己参考一些博客的方法进行了一个自定义弹框插件的实现研究

　　在最开始时，弹框组件我们可以写死在需要展示的页面上，通过v-if或者v-show来控制其显示，控制其显示的标志可以通过子父组件之间的emit传出事件方法去通知，这样的方法的确可以解决

二级面板以及弹框提示的问题，但是这种方式来控制显得不灵活而且没有可复用性。

　　因此想到能不能写成弹框的插件来复用，即我们写一个二级弹框的载体，通过这个载体我们在上面放置我们需要的组件进行显示。

　　按照这样的思想在网上搜索了一番：

　　发现在Vue2中可以根据Vue.extend的方法通过继承来实现dialog框的复用，在Vue3中取消了这样的方法，但是可以使用getcurrentInstance来获取全局的属性，并且对其进行注册，具体方法如下

import { createVNode, render } from 'vue';
import type { App } from "vue";


const Message: any = function (DialogComponent:any, options: any) {
    const container = document.createElement('div');
    container.className = "dialog";
    container.style.width = '100%';
    container.style.height = '89%';
    container.style.zIndex = '9999';
    container.style.position = 'fixed';
    container.style.background = 'rgba(213, 213, 213, 0.88)';
    container.style.top = '6.5%';
    container.style.bottom = '10%';
//创建虚拟节点
    const vm = createVNode(
        DialogComponent,
        options as any,
    );
//渲染
    render(vm, container);
　　
//默认寻找最初的根元素div，在我的工程中这个div的类名为‘.app-main’，有且仅有唯一
    var node = document.querySelector('.app-main');
    node.appendChild(container);
}
export default {
    install(app: App): void {
        app.config.globalProperties.$message = Message
    }
}

　　上述命名为Message的全局变量需要在main.ts中进行注册

注册完后该插件即可被全局使用；

此时我们可以写一个公用的添加组件和移除组件方法对其进行封装

import { isNullOrUndefined } from "util";

class DialogService {

    AddDialogComponent( ins:any,component: any, options?: any) {
        let dialog = document.querySelector('.dialog');
       
        if (isNullOrUndefined(dialog)) {
            if (options) {
                ins!.appContext?.config?.globalProperties.$message(component, options);
            } else {
                ins!.appContext?.config?.globalProperties.$message(component);
            }
        } else {
            //如果存在dialog了 ，则先移除
            this.RemoveDialogComponent();
            if (options) {
                ins!.appContext?.config?.globalProperties.$message(component, options);
            } else {
                ins!.appContext?.config?.globalProperties.$message(component);
            }
        }  
    }

    RemoveDialogComponent() {
        let dialog = document.body.querySelector('.dialog');
        let child = dialog.firstChild;
        dialog.removeChild(child);
        dialog.parentNode.removeChild(dialog);
    }
}
export default new DialogService()

　　这里提供AddDialogComponent( ins:any,component: any, options?: any) 方法来创建dialog，ins表示的是在创建时的当前getCurrentInstance()，component表示我们需要插入的组件

options是一个可选值，表示对组件的注入数据props。

这里提供的一些代码仍然有不足之处，比如多个二级面板同时存在时的问题等等，应该还能够继续完善，上述有错之处或者可以优化指出还请指正

标签：插件,container,自定义,style,弹框,options,dialog,any
来源： https://www.cnblogs.com/jsyynote/p/15044100.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3 制作一个自定义的弹框插件