Javascript Vuejs-元素UI-无法关闭带有交叉的对话框

我在使用

Vuejs 2.3

和

Element UI 1.3.1

时遇到了一个小问题。我希望能够通过单击

X

关闭对话框，但似乎没有捕获到该事件

<div id="app">
  <el-dialog title="Shipping address" v-model="showDialog"
    @close="closeDialog()">
    <button @click='cond1 = false'>Close</button>
  </el-dialog>
</div>

var Main = {
    data() {
      return {
        cond1: true,
        cond2: true,
        cond3: true,
      };
    },
    computed : {
        showDialog() {
        return this.cond1 && this.cond2 && this.cond3
        }
    },
    methods: {
        closeDialog() {
          alert('close event')}
    }
  };

接近
var Main={
数据（）{
返回{
赖斯1：是的，
赖斯2：是的，
赖斯3：是的，
};
},
计算：{
showDialog（）{
返回this.cond1&&this.cond2&&this.cond3
}
},
方法：{
closeDialog（）{
警报（‘关闭事件’）}
}
};

如果我点击

按钮

，但不是在十字架上，它就起作用了。 您能给我解释一下为什么以及我应该做什么吗？

根据，当您在元素ui中单击close X时发生的所有情况是，它会发出两个事件，

更新：可见

和

可见更改

。您需要监听其中一个事件，以便适当地更新数据以关闭对话框。您可以添加这样的方法

onVisible(isVisible){
    if (isVisible)
        return
    this.cond1 = false
}

并相应地更改模板

<el-dialog title="Shipping address" v-model="showDialog"
    @close="closeDialog()" @visible-change="onVisible" >

---

看起来他们的意图是利用被添加回Vue的机会，使用一个

visible

属性

我错过了，谢谢。他们确实引入了

sync

，但我仍然不知道如果我希望使用多个

数据属性

，如何实现相同的行为，即使是在

元素UI的文档中

他们不再引用

v-model

，而只引用

visible.sync

。您是否有任何想法来实现刚才使用

visible.sync

属性所做的事情？

对话框

仍然需要根据（3）个条件显示，而不仅仅是一个条件。除了

get

之外，您还可以尝试使用

set

进行计算。否则，你可以只听他们发射的事件，然后做你想做的事情。