Vue3全局封装dialog弹框

Vue3全局封装modal弹框使用：
   应用场景：全局动态form表单弹框
应用Vue3碎片： ref，reactive，app.component，defineExpose，defineProps，defineEmits
应用UI: element-plus dialog form
  一.封装
1.引入
main.js

1. import App from './App.vue'
2. import ModalPanel from "@/components/element/ModalPanel.vue";
3. const app=createApp(App)
4. app.component('ModalPanel',ModalPanel)

复制代码

2.使用

1.   <ModalPanel  
2.     :defineWidth="defineWidth"
3.     :selSingle="selSingle"
4.     :editTitle="editTitle"
5.     :editType="editType"
6.     :editForm="editForm"
7.     :fixedParam="fixedParam"
8.     :randomParam="randomParam"
9.     @updateData="declareData"
10.     @updateShow="updateSingShow"
11.     :key="modalPannelKey"
12.    />

复制代码

开启

1. const openModalPannel = () => {
2.   defineWidth.value=500;
3.   editType.value="add";
4.   editTitle.value="操作";
5.   fixedParam.value=[
6.   { name:"XX",value:"name"},
7.   ];
8.    randomParam.value=[
9.   { name:"xy",value:"name"},
10.   ];
11. }

复制代码

关闭

1. const updateSingShow = () => {
2.   selSingle.value=false;
3. }

复制代码

吸收

1. const declareData= (data) => {
2.    //do...
3. }

复制代码

二.具体封装
1.吸收参数

1. const selSingleShow = ref(false);
2. const props = defineProps({
3.   defineWidth: {
4.     required: true,
5.     type: Number,
6.     default: 0,
7.   },
8.   selSingle: {
9.     required: true,
10.     type: Boolean,
11.     default: "",
12.   },
13.   editTitle: {
14.     required: true,
15.     type: String,
16.     default: "",
17.   },
18.   editType: {
19.     required: true,
20.     type: String,
21.     default: "",
22.   },
23.   editForm: {
24.     required: true,
25.     type: Object,
26.     default: {},
27.   },
28.   fixedParam: {
29.     required: true,
30.     type: Array,
31.     default: [],
32.   },
33.   randomParam: {
34.     required: true,
35.     type: Array,
36.     default: [],
37.   },
38. });
39. const emit = defineEmits(['updateData','updateShow']);
40. const formList = reactive([]);

复制代码

2.初始化值

1. onMounted(() => {
2.   if(props!=undefined){
3.         formList.push(...props.fixedParam);
4.         formList.push(...props.randomParam);
5.        selSingleShow.value=props.selSingle;
6.     }
7. });

复制代码

3.关闭弹框

1. const  updateSingle=()=>{
2.   emit("updateShow",selSingleShow);
3. }

复制代码

4.更新数据

1. const updateNameChange=(data)=> {
2.     emit("updateData",data);
3. }

复制代码

5.弹框

1. <el-dialog
2.       v-model="selSingleShow"
3.       :title="editTitle"
4.       :width="defineWidth"
5.       align="left">
6.       <div class="modal-padding">
7.         <el-form
8.           ref="ruleFormRef"
9.           label-width="auto"
10.           label-position="top"
11.           :model="editForm"
12.           :rules="rules"
13.           class="demo-ruleForm"
14.         >
15.         <div v-for="(item, index) in formList">
16.           <el-form-item :label="item.name" :prop="item.value">
17.             <el-input v-model="editForm[item.value]" />
18.           </el-form-item>
19.         </div>
20.         </el-form>
21.       </div>
22.       <template #footer>
23.         <div class="modal-footer-padding">
24.           <el-button  type="primary"
25.             >确认</el-button
26.           >
27.           <el-button >取消</el-button>
28.         </div>
29.       </template>
30.     </el-dialog>

复制代码

三，交互
1.组件暴露方法

1. import { ref, reactive, onMounted,defineExpose} from "vue";
2. defineExpose({
3.   updateView,
4. });

复制代码

2.引入页调用

1. const ModalRef= ref(null);
2. const ModalKey= ref(0);

复制代码

1. <ModalPanel  ref="ModalRef" :key="ModalKey"/>

复制代码

刷新数据

2.   if(ModalRef.value!=null){
3.     ModalRef.value.updateViewList() //刷新数据
4.   }

复制代码

更新组件

1. ModalKey.value+= 1;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。