Vue 3 Element Plus 自定义弹出框组件实践

Vue 3 + Element Plus 自定义弹出框组件实践

在 Vue 3 项目中，使用 Element Plus 构建弹出框是一项常见的任务。为了简化这个过程，我们可以封装一个公共组件，使弹出框的调用变得简单而高效。本文将介绍如何通过 Vue 3 和 Element Plus，使用一个自定义的弹出框组件实现这一目标。

1. 弹出框组件封装

首先，我们封装了一个通用的弹出框组件，具体实现位于 util.js 文件中。通过 initInstance 方法，我们可以动态创建一个弹出框实例，并将其挂载到指定的容器上。以下是简要代码：

// util.js

import {h, render} from 'vue';

export function initInstance(component, container, option) {const vNode = h(component, option);
    render(vNode, container);
    document.body.appendChild(container.firstElementChild);
    return vNode.component;
}

export function getContainer() {return document.createElement('div');
}

2. 自定义弹出框配置

接下来，我们定义了一个名为 portPop 的自定义弹出框配置。这个配置使用了前面封装的通用方法，同时为弹出框提供了一些特定的配置。以下是简要代码：

// common.js

import {initInstance, getContainer} from "./util";
import PortPop from "../components/PortPop";

const instanceMap = new Map();

export const portPop = (option, call) => {const container = getContainer();
    let opt = {
        ...option,
        onComfrim: (data) => {call(data);
        },
        onVanish: () => {render(null, container);
            instanceMap.delete(vm);
        },
    };
    const component = initInstance(PortPop, container, opt);
    const vm = component.proxy;
    component.exposed.openDialog();
    instanceMap.set(vm, { option: opt});
};

3. 弹出框组件实现

首先，我们要先封装一下 el-dialog 组件
 

最后，我们实现了具体的弹出框组件 PortPop，这个组件使用了 Element Plus 的 Dialog 组件，并在其中嵌套了一些其他组件，以实现特定的功能。以下是简要代码：

4. 使用自定义弹出框组件

最终，我们可以在需要调用弹出框的地方，简单地执行 portPop 方法，并传递相应的配置和回调函数。这样，弹出框就会显示出来，用户可以与之交互。

// 在需要的地方调用自定义弹出框
import {portPop} from "./customDialog";

// 示例调用
portPop({title: '自定义弹出框', defaultKeyword: '关键字'}, (data) => {
    // 处理弹出框确认后的数据
    console.log('用户选择的数据：', data);
});

文件结构示例

组定义组件文件示例

效果：