Toggle navigation
集客麦麦@谢坤
首页
随笔
首页
>>
创作中心
>>
如何优雅的优化封装E...
如何优雅的优化封装ElementUI el-dialog 弹框
Not Found
1. 组件内部声明关闭变量 :visible.sync="visible" 2. 组件内部声明关闭方法 @close="DialogClose" 3. 监控父级关闭变量关闭当前 this.visible = this.DialogVisibleFlag 4. 异步更新父级关闭变量 this.$emit("update:DialogVisibleFlag", false) ```html <template> <el-dialog :show-close="true" :visible.sync="visible" :close-on-click-modal="false" @close="DialogClose"> // some content <div slot="footer" class="dialog-footer"> <el-button type="primary" plain @click="DialogClose">取消</el-button> <el-button type="primary" @click="onConfirm">确定</el-button> </div> </el-dialog> </template> <script> export default { // .... return { visible: false, }, watch: { DialogVisibleFlag() { this.visible = this.DialogVisibleFlag // 2. 监控父级关闭变量关闭当前 } }, methods: { DialogClose() { this.$emit("update:DialogVisibleFlag", false) // 4.异步更新父级关闭变量 } } } </script> ```