before-close 弹框关闭前的回调函数，父组件可以向子组件传递一个函数，用于修改子组件内的变量变量。应用场景如下：
1、封装 dialog 组件为 baseDialog，页面中使用 baseDialog 组件。
2、封装 dialog 组件为 baseDialog，子组件是一个 baseDialog+form 格式，将组件封装为 baseDialogForm，页面中使用 baseDialogForm
具体实现如下：
一、dialog 组件封装：
<template><el-dialogclass="base-dialog":visible.sync="visible"v-bind="$attrs"v-on="$listeners":before-close="beforeClose"><slot /><!-- 默认的 footer 挂载内容 --><div style="text-align: right" v-if="!$slots.footer"><el-button :type="okType" :loading="confirmLoading" @click="onOk">{{okText}}</el-button><el-button @click="onCancel">{{ cancelText }}</el-button></div><!-- 自定义 footer 挂载内容 --><div class="el-dialog__footer" v-if="$slots.footer"><slot name="footer"></slot></div></el-dialog>
</template><script>
export default {name: 'baseDialog',props: {// 显示/隐藏visible: {type: Boolean,default: false},// 确认按钮文字okText: {type: String,default: '确定'},// 确认按钮的类型okType: {type: String,default: 'primary'},// 取消按钮文字cancelText: {type: String,default: '取消'},// 确定按钮 loadingconfirmLoading: {type: Boolean,default: false}},methods: {// 确定onOk() {this.$emit('onOk');},// 取消onCancel() {this.$emit('update:visible', false);this.$emit('onCancel');},// 关闭前的回调beforeClose() {this.onCancel();}}
};
</script><style lang="scss" scoped>
.base-dialog {
}
</style>
二、组件使用部分：
场景1：主页面使用 baseDialog 组件
<template><div><el-button @click="handleOpen">打开弹框</el-button><base-dialog :visible="visible" @onOk="onOk" @onCancel="onCancel">dialog...<!-- 自定义 footer 挂载内容 --><!-- <div slot="footer"><el-button type="primary">审核通过</el-button><el-button type="primary">审核拒绝</el-button><el-button>取消</el-button></div> --></base-dialog></div>
</template><script>
export default {name: 'demo',data() {return {visible: false};},methods: {handleOpen() {this.visible = true;},onOk() {this.visible = false;},onCancel() {this.visible = false;}}
};
</script>
场景2：将 baseDialog+form 封装为 baseDialogForm 组件
<template><base-dialogtitle="新增":visible.sync="dialogVisible"ok-text="提交"@onOk="handleConfirm"@onCancel="handleCancel"><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><!-- 自定义 footer 挂载内容 --><!-- <div slot="footer"><el-button type="primary">审核通过</el-button><el-button type="primary">审核拒绝</el-button><el-button>取消</el-button></div> --></base-dialog>
</template><script>
export default {name: 'baseDialogForm',props: {visible: {type: Boolean,default: false}},data() {return {dialogVisible: this.visible,formInline: {user: '',region: ''}};},watch: {visible(newVal) {this.dialogVisible = newVal;}},methods: {// 确定handleConfirm() {this.$emit('update:visible', false);},// 取消handleCancel() {this.$emit('update:visible', false);},onSubmit() {console.log('submit!');}}
};
</script>
页面使用：
<template><div><el-button @click="handleOpen">打开弹框</el-button><base-dialog-form :visible.sync="visible" @onOk="onOk" @onCancel="onCancel">dialog...</base-dialog-form></div>
</template><script>
import BaseDialogForm from './components/baseDialogForm.vue';export default {name: 'demo',components: { BaseDialogForm },data() {return {visible: false};},methods: {handleOpen() {this.visible = true;},onOk() {this.visible = false;},onCancel() {this.visible = false;}}
};
</script>
简单总结：
针对于 baseDialog 组件的封装，之前为了更新子组件中的状态，通过使用在组件内部定义一个变量，接收父组件传递过来的 visible 属性实现双向绑定更新状态的效果，今天关注到了before-close 这个回调函数，很好用，使得基础组件的封装更加简洁，进而进行简单的分享与小结。
)
