Vue3全局封装dialog弹框
Vue3全局封装modal弹框使用：应用场景：全局动态form表单弹框
应用Vue3碎片： ref，reactive，app.component，defineExpose，defineProps，defineEmits
应用UI: element-plus dialog form
一.封装
1.引入
main.js
import App from './App.vue'
import ModalPanel from "@/components/element/ModalPanel.vue";
const app=createApp(App)
app.component('ModalPanel',ModalPanel)
2.使用
<ModalPanel
:defineWidth="defineWidth"
:selSingle="selSingle"
:editTitle="editTitle"
:editType="editType"
:editForm="editForm"
:fixedParam="fixedParam"
:randomParam="randomParam"
@updateData="declareData"
@updateShow="updateSingShow"
:key="modalPannelKey"
/>
开启
const openModalPannel = () => {
defineWidth.value=500;
editType.value="add";
editTitle.value="操作";
fixedParam.value=[
{ name:"XX",value:"name"},
];
randomParam.value=[
{ name:"xy",value:"name"},
];
}
关闭
const updateSingShow = () => {
selSingle.value=false;
}
吸收
const declareData= (data) => {
//do...
}
二.具体封装
1.吸收参数
const selSingleShow = ref(false);
const props = defineProps({
defineWidth: {
required: true,
type: Number,
default: 0,
},
selSingle: {
required: true,
type: Boolean,
default: "",
},
editTitle: {
required: true,
type: String,
default: "",
},
editType: {
required: true,
type: String,
default: "",
},
editForm: {
required: true,
type: Object,
default: {},
},
fixedParam: {
required: true,
type: Array,
default: [],
},
randomParam: {
required: true,
type: Array,
default: [],
},
});
const emit = defineEmits(['updateData','updateShow']);
const formList = reactive([]);
2.初始化值
onMounted(() => {
if(props!=undefined){
formList.push(...props.fixedParam);
formList.push(...props.randomParam);
selSingleShow.value=props.selSingle;
}
});
3.关闭弹框
constupdateSingle=()=>{
emit("updateShow",selSingleShow);
}
4.更新数据
const updateNameChange=(data)=> {
emit("updateData",data);
}
5.弹框
<el-dialog
v-model="selSingleShow"
:title="editTitle"
:width="defineWidth"
align="left">
<div class="modal-padding">
<el-form
ref="ruleFormRef"
label-width="auto"
label-position="top"
:model="editForm"
:rules="rules"
class="demo-ruleForm"
>
<div v-for="(item, index) in formList">
<el-form-item :label="item.name" :prop="item.value">
<el-input v-model="editForm" />
</el-form-item>
</div>
</el-form>
</div>
<template #footer>
<div class="modal-footer-padding">
<el-buttontype="primary"
>确认</el-button
>
<el-button >取消</el-button>
</div>
</template>
</el-dialog>
三，交互
1.组件暴露方法
import { ref, reactive, onMounted,defineExpose} from "vue";
defineExpose({
updateView,
});
2.引入页调用
const ModalRef= ref(null);
const ModalKey= ref(0);
<ModalPanelref="ModalRef" :key="ModalKey"/>
刷新数据
if(ModalRef.value!=null){
ModalRef.value.updateViewList() //刷新数据
}
更新组件
ModalKey.value+= 1;
https://img-blog.csdnimg.cn/direct/f1503aafad1b4ff4b841968dadbf8041.gif#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]