vue3 + Ts 封装全局函数式组件教程——确认弹窗组件

  Click to open the Message Box
import { ElButton } from 'element-plus'

      import GtButton from '@/components/GtButton.vue';

ElMessage.error('Oops, this is a error message.')

function createApp(rootComponent: Component, rootProps?: object): App

第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。

interface App {  mount(rootContainer: Element | string): ComponentPublicInstance}

参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。
如果该组件有模板或定义了渲染函数，它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下，容器元素的 innerHTML 将被用作模板。
在 SSR 激活模式下，它将激活容器内现有的 DOM 节点。如果出现了激活不匹配，那么现有的 DOM 节点将会被修改以匹配客户端的实际渲染结果。
对于每个应用实例，mount() 仅能调用一次。

interface App {  unmount(): void}

    import { ref, computed, nextTick } from 'vue';import gtButton from '@/components/gtButton/index.vue';const props = defineProps({    width: {        default: 400    },    successText: {        type: String,        default: '确认'    },    cancelText: {        type: String,        default: '取消'    },    headerText: {        type: String,        default: '提示'    },    content: {        type: String,        default: ''    },    // 成功回调函数    successPromise: {        type: Function    },    // 失败回调函数    cancelPromise: {        type: Function    },    hide: {        type: Function    },    // 是否需要右上角关闭按钮    showCancel: {        type: Boolean,        default: true    },    // 弹窗类型：default 默认显示确认、取消/confirm 仅显示确认    type: {        type: String,        default: 'default'    },    // 默认点击遮罩层不关闭    closeByOverlay: {        type: Boolean,        default: false    },    // 传入调用方法    holdOnFn: {        type: Function    },    overlayNode: {        type: Object    },});const isShow = ref(false);  // 弹窗控制const messageBoxWidth = computed(    () =>        ((parseInt(props.width.toString()) / 1920) * document.documentElement.clientWidth).toFixed(3) +        'px');  // 宽度控制
/** * @description: 遮罩层需要消失动画，两个动画效果必须同时触发，所以关闭时直接调用hide方法 * @return {*} */const onAfterLeave = () => {    // props.hide && props.hide();};
/** * @description: 显示弹窗 * @return {*} */const show = () => {    isShow.value = true;    if (props.closeByOverlay) {        props.overlayNode.addEventListener('click', hidden);    }};
/** * @description: 隐藏弹窗 * @return {*} */const hidden = () => {    isShow.value = false;    props.hide();    if (props.closeByOverlay) {        props.overlayNode.removeEventListener('click', hidden);    }};
const successHandle = () => {    if (!props.holdOnFn) {        props.successPromise();        nextTick(() => {            hidden();        });    } else {        props.holdOnFn();        // nextTick(() => {        //     hidden();        // });    }};const cancelHandle = () => {    props.cancelPromise();    nextTick(() => {        hidden();    });}
/** * @description: 将方法暴露出去 * @return {*} */defineExpose({    show});.gt-message-box{    position: fixed;    top: 45%;    left: 50%;    transform: translate(-50%, -50%);    z-index: 99;    .message-box-content{        width: 100%;        padding: 30px;        border-radius: 14px;        background: #FFFFFF;        .content-header{            display: flex;            justify-content: space-between;            align-items: center;            .header-title{                flex: 1;                font-size: 18px;                color: #1A1A1A;                line-height: 24px;            }            .header-close{                flex-shrink: 0;                padding: 0 0 0 24px;                .gticon-a-rongqi69{                    font-size: 24px;                    color: #949494;                }            }        }        .content-body{            display: flex;            justify-content: center;            width: 100%;            padding: 30px 0 40px;            .body-text{                max-width: 100%;                font-size: 14px;                color: #1A1A1A;                line-height: 18px;            }        }        .content-footer{            display: flex;            justify-content: flex-end;            .footer-btn{                margin-left: 20px;            }        }    }}/** * @description: 全局样式 * @return {*} */.gt-message-box-overlay {    position: fixed;    top: 0;    bottom: 0;    left: 0;    right: 0;    z-index: 100;    background: rgba(0, 0, 0, 0.1);    transition: opacity 0.3s ease-out;}.gt-message-box-overlay-enter-from,.gt-message-box-overlay-leave-to {    opacity: 0;}

import { createApp } from 'vue';import GtMessageBox from '@/components/gtMessageBox/module.vue';
/** * @description: 创建自定义vue组件实例并挂载到Dom上 * @return {*} * @param {*} options */const gtMessageBoxDom = (options = {}) => {    // 创建遮罩层    let overlayNode = createOverlay();
    // 创建弹窗元素节点    const rootNode: HTMLElement = document.createElement('div');    // 在body标签内部插入此元素    rootNode.className = `gt-message-dialog`;    rootNode.style.position = 'fixed';    rootNode.style.zIndex = overlayNodeZIndex + '';    document.body.appendChild(rootNode);
    const hide = function () {        // 显示移除动画        overlayNode.classList.add('gt-message-box-overlay-leave-to');        setTimeout(() => {            overlayNode.classList.remove('gt-message-box-overlay-leave-to');            deleteOverlay(overlayNode);        }, 300);
        // 卸载已挂载的应用实例        setTimeout(() => {            app.unmount();            document.body.contains(rootNode) && document.body.removeChild(rootNode);        }, 300);    };
    // 创建应用实例（第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props）    const app = createApp(GtMessageBox, {        ...options,        hide,        overlayNode    });
    // 将应用实例挂载到创建的 DOM 元素上    return app.mount(rootNode);};
/** * @description: 显示弹窗 * @return {*} * @param {*} options */const showGtMessageBoxDom = (options = {}) => {    return new Promise((resolve, reject) => {        options['successPromise'] = () => {            resolve();        };        options['cancelPromise'] = () => {            reject();        };        const popres: any = gtMessageBoxDom(options);        popres.show();    });};
// 注册插件app.use()会自动执行install函数gtMessageBoxDom.install = app => {    // 注册全局属性，类似于 Vue2 的 Vue.prototype    app.config.globalProperties.$GtMessageBox = options => showGtMessageBoxDom(options);};// 定义confirm方法用于直接调用gtMessageBoxDom.confirm = options => showGtMessageBoxDom(options);
export default gtMessageBoxDom;

// Vue3封装全局函数式组件import GtMessageBox from '@/components/gtMessageBox/index';app.use(GtMessageBox); // Vue3封装全局函数式组件

①：为什么采用调用函数方法的方式去控制显隐
答：目的是为了那个显示与消失的动画效果，当组件创建后需要组件内 ”isShow“ 产生变化才能触发 的动画效果，所以这里写了show函数方法。
②：函数式组件的这两个文件之间的联系
答：简单来说，ts 文件传参数及函数给vue文件，均可在 createApp 的第二个参数中传递，vue文件相当于子组件，使用props的方式接收；vue文件传值及函数给ts文件，可以通过 defineExpose 方法暴露出去，ts文件中在应用实例创建完成后，就能拿到暴露出来的属性及方法。

import { getCurrentInstance } from 'vue';// 获取当前实例，在当前实例相当于 vue2 中的 thisconst { proxy }: any = getCurrentInstance();// 最简单的调用方式，即可出来开头所展示的效果proxy.$GtMessageBox({  content: '此审批已经被删除，请刷新页面！'});// 传递自定义参数，与 module.vue 文件接收的参数对应setTimeout(() => {  proxy.$GtMessageBox({    headerText: '警告',    content: 'Hello World'  })    .then(() => {      console.log(111)    })    .catch(() => {      console.log(222)    })}, 2000);

import GtMessageBox from "@/components/gtMessageBox/index";GtMessageBox.confirm({    content: '此审批已经被删除，请刷新页面！',    holdOnFn: () => {      GtMessageBox.confirm({          content: '此审批已经被删除，请刷新页面！',          type: 'confirm'      })          .then(() => {              console.log(333)              // 卸载已打开的所有弹窗              GtMessageBox.hideAll()          })    }})    .then(() => {      console.log(111)    })    .catch(() => {      console.log(222)    })