目录一、封装el-dialog组件二、使用刚刚封装好的BaseDialog.vue组件三、点击按钮弹出弹窗四、实现效果总结一、封装el-dialog组件创建名为BaseDialog.vue的公共组件根据需求创建不同的插槽以下创建了details、forms、buttons三个具名插槽template el-dialog :visible.syncvisible :widthdialogWidth :before-closehandleClose :close-on-click-modalfalse template slottitle span v-htmltitle/span /template !-- 定义插入除form表单外其他内容的插槽 -- slot namedetails / !-- 定义插入表单的插槽-- slot nameforms / div slotfooter classfooter-buttons !-- 定义插入弹窗按钮的插槽 -- slot namebuttons / /div /el-dialog /template script export default { name: BaseDialog, props: { // 弹窗标题 title: { type: String, default: }, // 弹窗宽度 dialogWidth: { type: String, default: 50% }, // 弹窗的显示与隐藏 visible: { type: Boolean, default: false }, }, data() { return { } }, methods: { handleClose(){ this.$emit(handleClose, false) }, } } /script style langscss scoped .footer-buttons { text-align: center; } /style二、使用刚刚封装好的BaseDialog.vue组件创建名为ceshi-dialog的.vue文件引入import BaseDialog from ../components/BaseDialog.vue,并注册根据弹窗中的内容分类分别插入到details、forms、buttons三个插槽template BaseDialog title编辑 :visiblevisible dialogWidth600px handleClosehandleCancel !-- 插入到namedetails的插槽 -- template v-slot:details div stylepadding-left: 20px; el-descriptions title用户信息 el-descriptions-item label-class-nametext-bold label用户名kooriookami/el-descriptions-item el-descriptions-item label-class-nametext-bold label手机号18100000000/el-descriptions-item el-descriptions-item label-class-nametext-bold label居住地苏州市/el-descriptions-item el-descriptions-item label-class-nametext-bold label备注 el-tag sizesmall学校/el-tag /el-descriptions-item el-descriptions-item label-class-nametext-bold label联系地址江苏省苏州市吴中区吴中大道 1188 号/el-descriptions-item /el-descriptions /div /template !-- 插入到nameforms的插槽 -- template v-slot:forms el-form :modelruleForm status-icon :rulesrules refruleFormRef label-width100px classdemo-ruleForm el-form-item label密码 proppass el-input typepassword v-modelruleForm.pass autocompleteoff/el-input /el-form-item el-form-item label确认密码 propcheckPass el-input typepassword v-modelruleForm.checkPass autocompleteoff/el-input /el-form-item el-form-item label年龄 propage el-input v-model.numberruleForm.age/el-input /el-form-item /el-form /template !-- 插入到namebuttons的插槽 -- template v-slot:buttons el-button typeprimary clicksubmitForm(ruleFormRef)提交/el-button el-button clickresetForm(ruleFormRef)重置/el-button /template /BaseDialog /template script import BaseDialog from components/BaseDialog.vue export default { name: TransportUpdate, components: { BaseDialog }, props: { visible: { type: Boolean, default: false } }, data() { return { ruleForm: { pass: , checkPass: , age: }, rules: { pass: [ { require: false, message: 请输入密码, trigger: blur } ], checkPass: [ { require: false, message: 请输入密码, trigger: blur } ], age: [ { require: false, message: 请输入年龄, trigger: blur } ] } } }, methods: { initData() {}, submitForm(formName) { this.$refs[formName].validate((valid) { if (valid) { alert(submit!); } else { console.log(error submit!!); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, handleCancel() { this.$emit(update:visible, false) this.$refs.ruleFormRef.resetFields(); } } } /script style langscss scoped ::v-deep .text-bold { font-weight: bold; } /style三、点击按钮弹出弹窗创建名为index.vue组件加一个按钮点击后即可弹出弹窗template div el-button sizemini typeprimary iconel-icon-edit clickhandleUpdate()编辑/el-button ceshiDialog refdialogRef :visible.syncvisible v-ifvisible / /div /template script import ceshiDialog from ./ceshi-dialog export default { name: Index, components: { ceshiDialog }, data() { return { visible: false, }; }, methods: { handleUpdate() { this.visible true } } }; /script四、实现效果点击【编辑】按钮弹出编辑弹窗点击右上角叉按钮即可关闭弹窗并移除弹窗的dom节点总结在开发管理系统时很多页面表格的操作列按钮有需要弹窗的需求在UI风格统一的场景下把弹窗封装成公共组件一次编写多处使用不仅极大的提升开发效率而且能够简化代码结构缩短开发周期。