如何通过Vue3+Element Plus自定义弹出框组件

古德摸零

前言

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

1. 弹出框组件封装

首先，我们封装了一个通用的弹出框组件，具体实现位于

1. util.js

复制代码

文件中。通过

1. initInstance

复制代码

方法，我们可以动态创建一个弹出框实例，并将其挂载到指定的容器上。以下是简要代码：

1. // util.js
   
2. 
   
3. import { h, render } from 'vue';
   
4. 
   
5. export function initInstance(component, container, option) {
   
6.     const vNode = h(component, option);
   
7.     render(vNode, container);
   
8.     document.body.appendChild(container.firstElementChild);
   
9.     return vNode.component;
   
10. }
    
11. 
    
12. export function getContainer() {
    
13.     return document.createElement('div');
    
14. }

复制代码

2. 自定义弹出框配置

接下来，我们定义了一个名为

1. portPop

复制代码

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

1. // common.js
   
2. 
   
3. import { initInstance, getContainer } from "./util";
   
4. import PortPop from "../components/PortPop";
   
5. 
   
6. const instanceMap = new Map();
   
7. 
   
8. export const portPop = (option, call) => {
   
9.     const container = getContainer();
   
10.     let opt = {
    
11.         ...option,
    
12.         onComfrim: (data) => {
    
13.             call(data);
    
14.         },
    
15.         onVanish: () => {
    
16.             render(null, container);
    
17.             instanceMap.delete(vm);
    
18.         },
    
19.     };
    
20.     const component = initInstance(PortPop, container, opt);
    
21.     const vm = component.proxy;
    
22.     component.exposed.openDialog();
    
23.     instanceMap.set(vm, { option: opt });
    
24. };

复制代码

3. 弹出框组件实现

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

1. <template>
   
2.   <el-dialog
   
3.     :model-value="modelValue"
   
4.     :title="title"
   
5.     :width="width"
   
6.     :modal="modal"
   
7.     draggable
   
8.     destroy-on-close
   
9.     :close-on-click-modal="false"
   
10.     append-to-body
    
11.     :before-close="beforeClose"
    
12.     @close="dialogColse"
    
13.     @closed="dialogColsed"
    
14.   >
    
15.     <slot />
    
16.     <template #footer>
    
17.       <span class="dialog-footer">
    
18.         <slot name="footer" />
    
19.       </span>
    
20.     </template>
    
21.   </el-dialog>
    
22. </template>
    
23. <script setup name="Dialog">
    
24. import { ElDialog } from "element-plus";
    
25. const props = defineProps({
    
26.   modelValue: {
    
27.     type: [Boolean],
    
28.     default: false,
    
29.   },
    
30.   title: {
    
31.     type: [String],
    
32.     default: "",
    
33.   },
    
34.   width: {
    
35.     type: [String],
    
36.     default: "",
    
37.   },
    
38.   modal: {
    
39.     type: [Boolean],
    
40.     default: false,
    
41.   },
    
42.   beforeClose: [Function],
    
43. });
    
44. const emits = defineEmits(["update:modelValue", "onClosed", "closed"]);
    
45. function dialogColse() {
    
46.   emits("update:modelValue", false);
    
47. }
    
48. function dialogColsed() {
    
49.   emits("onClosed", false);
    
50.   emits("closed", false);
    
51. }
    
52. </script>
    
53. 
    
54. <style lang="scss">
    
55. </style>

复制代码

最后，我们实现了具体的弹出框组件

1. PortPop

复制代码

，这个组件使用了 Element Plus 的

1. Dialog

复制代码

组件，并在其中嵌套了一些其他组件，以实现特定的功能。以下是简要代码：

1. <template>
   
2.   <div>
   
3.     <Dialog :title="props.title" v-model="dialog" width="920px">
   
4.         <!-- ... 弹出框内容 ... -->
   
5.         <template #footer>
   
6.             <div class="dialog-footer">
   
7.               <el-button type="primary" size="small" @click="confrim">
   
8.                 确定
   
9.               </el-button>
   
10.               <el-button @click="dialog = false" size="small">取消</el-button>
    
11.             </div>
    
12.           </template>
    
13.     </Dialog>
    
14.   </div>
    
15. </template>
    
16. 
    
17. <script setup lang="tsx">
    
18. import {
    
19.   nextTick,
    
20.   ref, useAttrs,
    
21. } from 'vue'
    
22. import Dialog from '@/components/dialog'
    
23. import {
    
24.   ElInput,
    
25.   ElButton,
    
26. } from 'element-plus'
    
27. 
    
28. const props = defineProps({
    
29.   title: {
    
30.     type: [String],
    
31.     default: '',
    
32.   },
    
33.   type: {
    
34.     type: [String],
    
35.     default: '',
    
36.   },
    
37. })
    
38. 
    
39. const emits = defineEmits(['comfrim'])
    
40. const attrs = useAttrs()
    
41. const dialog = ref(false)
    
42. function openDialog() {
    
43.   dialog.value = true
    
44. }
    
45. const confrim = async () => {
    
46.   emits('comfrim', "传递给父组件的数据")
    
47.   nextTick(() => {
    
48.     dialog.value = false
    
49.   })
    
50. }
    
51. defineExpose({ openDialog })
    
52. 
    
53. </script>
    
54. <style lang="scss">
    
55. </style>

复制代码

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

最终，我们可以在需要调用弹出框的地方，简单地执行

1. portPop

复制代码

方法，并传递相应的配置和回调函数。这样，弹出框就会显示出来，用户可以与之交互。

1. // 在需要的地方调用自定义弹出框
   
2. import { portPop } from "./customDialog";
   
3. 
   
4. // 示例调用
   
5. portPop({ title: '自定义弹出框', defaultKeyword: '关键字' }, (data) => {
   
6.     // 处理弹出框确认后的数据
   
7.     console.log('用户选择的数据：', data);
   
8. });

复制代码

文件结构示例

组定义组件文件示例

效果：

总结

到此这篇关于如何通过Vue3+Element Plus自定义弹出框组件的文章就介绍到这了,更多相关Vue3 ElementPlus自定义弹出框组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/320942ru6.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！