饿了么多个对话框组件Dialog在同一页面中的处理情况

在页面中,一个函数 一组变量对象数据控制多个对话框的显示隐藏

[code]<tempalte>
<div>
<el-button @click="handleAction(1)"type="text">按钮1触发成功对话框</el-button>
<el-button @click="handleAction(2)"type="text">按钮2触发失败对话框</el-button>

<order-import-success
:visible.sync="visible.successVisible"
@on-success="handleSuccess"
></order-import-success>

<order-import-fail
:visible.sync="visible.failVisible"
@on-fail="handleFail"
></order-import-fail>
</div>
</tempalte>
<script>
data(){
return {
visible: {
successVisible: false,   //按钮1控制
failVisible: false,		//按钮2控制
},
}
},
methods：{
handleAction(val){
if(val===1){
this.setVisibleFlag('successVisible');
}else if(val===2){
this.setVisibleFlag('failVisible');
}
},
setVisibleFlag(opt) {
let obj = {};
for (let key in this.visible) {
obj[key] = opt == key ? true : false;
}
this.visible = obj;
},
handleSuccess(){

},
handleFail(){

}
}
</script>

对话框组件中（以失败对话框组件为例）

[code]<template>
<div>
<el-dialog
title="失败对话框"
visible.sync="myVisible"
width="700px"
:close-on-click-modal="false"
>
<el-button size="small" type="primary" @click="sure">确定</el-button>
<el-button size="small" type="warn" @click="cancel">取消</el-button>
</el-dialog>
</div>
</template>
<script>
props:{
visible: {
type: Boolean,
default:false
},
},
computed: {
myVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("update:visible", val);    //此时val=false;
}
}
},
watch: {
visible(newVal, oldVal) {

}
},
methods:{
sure() {
this.$emit("update:visible", false);
this.$emit("on-fail");
},
cancel(){
this.$emit("update:visible", false);
}
}
</script>