javascript - Vuejs - 元素用户界面 - 无法关闭带有十字的对话框

Question

我在使用 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')}
    }
  };

https://jsfiddle.net/zuL0uqy2/

如果我点击 button 但没有点击十字，它就会工作。您能向我解释一下为什么以及我应该怎么做吗？

Answer 1

根据source ，当您单击元素 ui 中的关闭 X 时，它会发出两个事件，update:visible 和 visible-change。您需要收听这些事件之一，以便适本地更新您的数据以关闭对话框。您可以添加这样的方法

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

并相应地更改您的模板。

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

Example .

看起来他们的意图是让您利用 sync被添加回 Vue 并使用 visible 属性。