dialog封装

通用封装弹窗 / 自定义组件模板可套用// 子组件templateel-dialog v-modelinnerFlagtitle弹窗// 业务内容template #footerspanclassel-button clickstate.peopleDialogShow false取消/el-buttonel-button typeprimaryclickconfirm确定/el-button/span/template/el-dialog/templatescript setupimport{computed}fromvue// 1. 定义接收的开关参数constpropsdefineProps([show])// 2. 定义更新事件 业务事件constemitdefineEmits([update:show,confirmSelect])// 封装双向绑定constinnerFlagcomputed({get(){returnprops.show},set(val){emit(update:show,val)}})// 业务操作抛出数据constconfirm(){emit(confirmSelect,选中的数据)}/script// 父组件CustomDialog v-model:showisDialogShowconfirmSelectgetData/script setupconstisDialogShowref(false)constgetData(res){console.log(子组件传回数据,res)isDialogShow.valuefalse}/script业务示例templateel-dialogv-modelinnerVisibletitle组件Libraryv-ifinnerVisiblewidth90%stylemargin-top:4%divclasscomBoxdivclassxxBoxclickselectComp(msg)XxCom/XxCom/divdivclassrwBoxclickselectComp(task)RwCom/RwCom/divdivclasschartBoxclickselectComp(chart)BarChartrefbarChartsChild/BarChart/div/div/el-dialog/templatescriptsetupimport{ref,onMounted,reactive,computed,}fromvueimportXxComfrom/components/text/xx.vueimportRwComfrom/components/text/rw.vueimportBarChartfrom/components/chart/barChart.vueconstemitdefineEmits([select,update:comDialogShow])constpropsdefineProps([comDialogShow])constinnerVisiblecomputed({get(){returnprops.comDialogShow},//父组件传进来的弹窗显示状态set(val){emit(update:comDialogShow,val)}//通知父组件更新变量})// 自定义业务事件 把用户选中的组件标识 传给父页面constselectComp(key){emit(select,key)}onMounted((){})/scriptstylelangscssscoped//dialog 相关样式 .comBox{display:flex;flex-wrap:wrap;gap:12px;/* 模块间距按需调整 */width:100%;height:100%;overflow:auto;.xxBox, .rwBox, .chartBox, .zbBox{width:24.4%;height:36%;background:#f5f7fa;border-radius:8px;padding:12px;overflow-y:auto;/* 内容超出时滚动 */}}/style主页面引入templateComponentLibDialogv-model:comDialogShowstate.dialogVisibleselectselectCompHandle//templatescriptsetupconststatereactive({dialogVisible:false,})// 自定义事件弹窗选中组件赋值给对应模块constselectCompHandle(compKey){// 给当前操作模块赋值moduleData[activeModuleId].keycompKey// 关闭弹窗state.dialogVisiblefalse}/script详解 v-model:visible 和 select 分别是什么、为什么这么写Vue3 组件自定义双向绑定规范v-model:xxx变量 等价于 :xxx变量 update:xxx新值 变量 新值v-model:comDialogShow“dialogVisible” —— Vue3 多参数 v-model 语法规则绑定参数名 xxx更新事件必须固定叫 update:xxx这是 Vue 语法约定不能随便改事件名。// 弹窗组件里定义了constemitdefineEmits([select,update:comDialogShow])constpropsdefineProps([comDialogShow])constinnerVisiblecomputed({get(){returnprops.comDialogShow},//父组件传进来的弹窗显示状态set(val){emit(update:comDialogShow,val)}//通知父组件更新变量})// 父组件对应写法两种写法完全等价//写法1. 简写推荐ComponentLibDialog v-model:comDialogShowdialogVisible///写法2. 完整展开写法更好理解底层ComponentLibDialog:comDialogShowdialogVisibleupdate:comDialogShowval dialogVisible val///能不能换名字完全可以举例子//比如不想用 visible改用 open//1.子组件改 props、emit 名称constpropsdefineProps([open])constemitdefineEmits([update:open])constinnerOpencomputed({get(){returnprops.open},set(val){emit(update:open,val)}})//2.父组件同步改成ComponentLibDialog v-model:opendialogVisible/select“selectCompHandle” —— 自定义业务事件子组件触发 emit(‘select’, 参数)第一个参数是事件名后面是要传给父页面的数据// 弹窗需要把 用户选中的组件标识msg/task/chart传给父页面所以自定义事件 select// 选中组件时抛出keyconstselectComp(key){emit(select,key)}父组件接收 select“selectCompHandle”constselectCompHandle(compKey){if(!activeModuleId)return// 给当前操作模块赋值组件moduleData[activeModuleId].keycompKey// 关闭弹窗state.comDialogShowfalse}事件名可以随便自定义没有强制约束比如你想叫 chooseComponent、pick 都没问题子组件emit(‘chooseComponent’, compKey)父组件chooseComponent“handleSelectComp”举个对比示例换一套名字演示。功能完全不变只是参数和事件名换了。//子组件constpropsdefineProps([open])constemitdefineEmits([update:open,pickComponent])constinnerOpencomputed({get(){returnprops.open},set(val){emit(update:open,val)}})consthandleSelect(key){emit(pickComponent,key)innerOpen.valuefalse}//父组件ComponentSelectDialog v-model:opendialogVisiblepickComponenthandleSelectComp/总结两类事件的区别类型语法规则作用命名约束v-model:xxx 双向绑定事件固定 update:xxx同步开关类状态弹窗显隐、开关、输入框值更新事件名不能自定义必须 update:xxx自定义业务事件 xxx事件名完全自定义传递业务数据选中项、提交、删除、点击随便起名见名知意即可使用场景什么时候用 v-model:xxx什么时候用自定义事件1.控制开关、输入值、显隐这类双向同步状态 → 用 v-model:xxx2.点击选择、提交、删除、获取业务数据这类单向回调传参 → 自定义事件 xxx