vue3中的provide和inject实用案例之基于el-dialog的命令式弹框，直接一行js代码打开

需求场景

• 某些情况下，我们要使用一个弹框组件的时候
• 一般都是这样使用：

  This is a dialog


import { ElDialog } from 'element-plus'
import { ref } from "vue";

const dialogVisible = ref(false)

const open = ()=>{
    dialogVisible.value = true
}

• 也就是说，每次想要有一个弹框打开功能
• 都需要引入 ElDialog、再定义一个弹框打开关闭的变量 dialogVisible
• 在点击事件中去更改这个响应式变量
• 每次都要写这么多，那么使用成本就逐渐抬高
• 另外某些场景下，这种用法，并不太合适
• 所以，我们要考虑，能不能通过类似于alert('消息')
• 这种方式，来直接调用，实现效果？
• 答案是可以的，通过provide和inject既可以实现

效果图

第一步，main.js注入dialogService，提供两个函数openDialog, closeDialog

// 引入弹框开关方法
import { openDialog, closeDialog } from './command/dialogService/dialogService.js';

// 使用provide来提供dialogService的开关方法，那么任意子组件，就可以inject使用之了
app.provide('dialogService', { openDialog, closeDialog });

第二步，创建dialogService.js提供openDialog, closeDialog

/command/dialogService/dialogService.js

import { ref, h, createVNode, render } from 'vue';
import { ElDialog } from 'element-plus';
import bodyComponents from './bodyComponents.vue';
import footerComponents from './footerComponents.vue';

// 布尔值变量
const dialogVisible = ref(false);
// 弹框挂载的dom
let container;

const openDialog = (comAttrs, dialogAttrs) => {
    dialogVisible.value = true;
    if (!container) {
        // 创建一个容器dom，并丢进去
        container = document.createElement('div');
        document.body.appendChild(container);
        // 创建虚拟dom节点，并render
        const vnode = createVNode(ElDialog, {
            title: '我是标题',
            width: 800,
            // 合并传递进来的el-dialog的属性参数
            ...dialogAttrs,
            modelValue: dialogVisible.value,
        }, {
            default: () => h(bodyComponents, { comAttrs }),
            // 可拓展footer
            footer: () => h(footerComponents),
        });
        render(vnode, container);
    }
};

const closeDialog = () => {
    dialogVisible.value = false;
    if (container) {
        render(null, container); // 清除渲染的内容
        container.remove();
        container = null;
    }
};

export { openDialog, closeDialog };

/command/dialogService/bodyComponents.vue

/command/dialogService/footerComponents.vue

第三步，通过一个统一inject的函数，便于在某个位置使用

/command/dialogService/useDialog.js

import { inject } from 'vue';

export function useDialog() {
    const dialogService = inject('dialogService');
    if (!dialogService) {
        throw new Error('Dialog service not provided!');
    }
    return dialogService;
}

第四步，在某个.vue文件中使用

至此，我们就可以实现类似于alert('xxx')的形式，打开弹框了...

完整代码github

github: https://github.com/shuirongshuifu/vue3-echarts5-example