前端到处需要用到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:
This is at dialog.
export default {
name: 'testAtDialog',
props: ['visible'],
data() {
return {
dialogVisible: { bol: false },
}
},
watch: {
visible: {
handler: function(val, oldval) {
this.dialogVisible.bol = val
if (val.bol) {
this.init()
}
},
deep: true,
immediate: true
},
},
methods: {
init() {
console.log('init')
},
}
}
最后是封装了el-dialog的组件at-dialog：
export default {
name: 'atDialog',
props: {
title: {
type: String,
default: this._("No Title"),
},
size: {
type: String,
default: "small"
},
visible: {
type: Object,
default: { bol: false }
}
},
data() {
return {
width: "600px",
};
},
watch: {
visible() {
console.log('watch visible', 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)
},
}
};
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
