大佬们遇到过这个问题吗？对element-ui的el-dialog进行封装，应该怎样处理visible？

Question

前端到处需要用到e-dialog，对dialog的样式，close处理，visible处理的重复性代码很多，打算对其进行进一步封装，写一个我自己的at-dialog，里头的slot留给el-dialog，然后在index.vue的子组件testAtDialog.vue里面使用这个at-dialog。相当于用了三层父子关系，这个visible怎么样处理才能管用？下面的代码没法把el-dialog显示出来：index.vue：其中的testDialogVisible在index.vue的data中定义：testDialogVisible:{bol:false},testAtDialog.vue:Thisisatdialog.exportdefault{name:'testAtDialog',props:['visible'],data(){return{dialogVisible:{bol:false},}},watch:{visible:{handler:function(val,oldval){this.dialogVisible.bol=valif(val.bol){this.init()}},deep:true,immediate:true},},methods:{init(){console.log('init')},}}最后是封装了el-dialog的组件at-dialog：exportdefault{name:'atDialog',props:{title:{type:String,default:this._("NoTitle"),},size:{type:String,default:"small"},visible:{type:Object,default:{bol:false}}},data(){return{width:"600px",};},watch:{visible(){console.log('watchvisible',this.visible)},size(){switch(this.size){case"auto":this.width=""break;case"medium":this.width="800px"break;case"small":this.width="600px"break;case"mini":this.width="400px"break;}},},methods:{closeDialog(){this.visible.bol=false//this.$emit('update:show',false)},}};

Answer 1

props:{
visible:{
type:Boolean,
default:false
},
},
computed:{
mVisible:{
get(){
returnthis.visible
},
set(s){
this.$emit('update:visible',s);
}
}
}