vue2和vue3的全局弹窗组件封装

为什么要封装组件

封装组件是为了能够更加便捷、快速的进行业务功能的开发。组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中，我们难免会写很多类似的、重复的代码，有些相似的功能但涉及的字段有一些不一样。这时候可以把那些相同的功能，抽出来封装成组件，通过组件引用方式就很省事了。

confirm.vue组件内容

<template>
    <div class="complant" v-if="isShow">
        <div class="complant_main">
            <div class="popup_top">{{ text.title }}</div>
            <div class="complant_inner">
                <div class="popup_mes" v-if="text.mesg != ''">{{ text.mesg }}</div>
                <div class="popup_html" v-if="text.cntMsg != ''" v-html="text.cntMsg" ></div>
                <div class="popup_btn">
                    <input 
                        type="button" 
                        class="cancel"
                        :value="text.btn.cancelVal" 
                        @click="cancel"
                        :style="text.cancelValStyle"
                        v-if="text.cancelBtn">
                    <input 
                        type="button" 
                        :value="text.btn.confirmVal" 
                        @click="confirm"
                        :style="text.confirmValStyle"
                        :class="{ confirm: text.cancel == false }"
                        v-if="text.confirmBtn">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isShow: true,
                text: {
                    title: "",
                    mesg: "",
                    cntMsg: "",
                    cancelBtn: true,
                    confirmBtn: true,
                    cancelValStyle: null,
                    confirmValStyle: null,
                    btn: {
                        confirmVal: "确定",
                        cancelVal: "取消"
                    }
                }
            }
        },
        methods: {
            cancel() {
                this.isShow = false;
            },
            confirm() {
                this.isShow = false;
            }
        },
    }
</script>

<style scope lang="less">
    .complant{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #00000040;

        .complant_main{
            width: 300px;
            background: #fff;
            text-align: center;
            border-radius: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;

            .popup_top{
                line-height: 40px;
                background-color: #40a9ff;
                color: #fff;
            }

            .complant_inner{
                padding: 10px 0;
                div{
                    margin: 10px 0;
                }

                .popup_btn{
                    input{
                        background-color: #40a9ff;
                        color: #fff;
                        padding: 6px 10px;
                        border-radius: 6px;
                        border-color: initial;
                        margin: 0 10px;
                    }
                }
            }
        }
    }
</style>

confirm.js文件

vue2封装组件是基于Vue.extend的封装

import Vue from 'vue';
import confirm from '../../components/confirm';

let confirmConstructor = Vue.extend(confirm);

let theConfirm = function (text) {
    return new Promise((res, rej) => { //promise封装，ok执行resolve，no执行rejectlet
        let confirmDom = new confirmConstructor({
            el: document.createElement('div')
        })
        document.body.appendChild(confirmDom.$el);  //new一个对象，然后插入body里面
        confirmDom.text = Object.assign({},confirmDom.text, text);   //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
        confirmDom.confirm = function () {
            confirmDom.isShow = false;
            res("确认")
        }
        confirmDom.cancel = function () {
            confirmDom.isShow = false;
            rej("取消")
        }

    })
}

export default theConfirm;

由于vue3取消了extend，获取组件的$el需要换个写法

import { createApp } from "vue";
import confirmCon from '../../components/confirm';

let confirmDom;

// 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
const Confirms = (text) => {
    return new Promise((res, rej) => { //promise封装，ok执行resolve，no执行rejectlet
        confirmDom = createApp(confirmCon).mount(document.createElement("div"));
        confirmDom.text = Object.assign({},confirmDom.text, text); ;
        document.body.appendChild(confirmDom.$el);
        confirmDom.confirm = function () {
            confirmDom.isShow = false;
            res("确认")
        }
        confirmDom.cancel = function () {
            confirmDom.isShow = false;
            rej("取消")
        }
    })
}
export default Confirms

在man.js注册

import confirmjs from './assets/js/confirm.js'

//vue2写法
Vue.prototype.$confirm = confirmjs;

//vue3写法
const app = createApp(App);
app.config.globalProperties.$confirm = confirmjs;

最后在页面需要的时候，this可以直接用

<button @click="defaults">点我</button>

export default {
  methods: {
    defaults() {
      this.$confirm({
        title: "信息",
        mesg: "确定删除吗？",
        cntMsg: '<div>你好,插入一个元素</div>',
        cancelValStyle: { color: "yellow" },
        btn: {
          confirmVal: "确认删除",
          cancelVal: "我再想想"
        }
      })
      .then((res) => {
        console.log("yes：",res);
      }).catch((err) => {
        console.log("no：",err);
      });
    }
  },
};