Vuejs Vuikit组件vk-modal-close点击事件无法触发求助

嘿，我刚好之前也碰到过Vuikit里这个vk-modal-close点击事件不生效的问题，哪怕加了@click.native也没反应，给你几个亲测有效的解决思路：

1. 改用模态框自带的关闭事件 #

其实Vuikit的vk-modal组件本身就提供了@close事件，不管是点击关闭按钮还是通过其他方式关闭模态框，这个事件都会触发。你可以把你的逻辑直接写到这个事件里，省心又靠谱：

<template>
  <div class="uk-scope">
    <vk-modal :show="isShow" v-if="config" @close="handleModalClose">
      <vk-modal-close large></vk-modal-close>
      <vk-notification :messages.sync="messages"></vk-notification>
      <app-breadcrumb :current-view="currentView" />
      <component v-bind:is="currentView"/>
    </vk-modal>
  </div>
</template>

<script>
export default {
  methods: {
    handleModalClose() {
      alert('hello!');
      // 记得手动关闭模态框，或者根据你的业务逻辑调整
      this.isShow = false;
    }
  }
}
</script>

2. 给关闭按钮套个父元素绑定事件 #

有时候组件内部会阻止事件冒泡，导致直接绑定在vk-modal-close上的事件触发不了。这时候你可以给它套个div，把点击事件绑定在父元素上：

<template>
  <div class="uk-scope">
    <vk-modal :show="isShow" v-if="config">
      <div @click="alert('hello!')" style="display: inline-block;">
        <vk-modal-close large></vk-modal-close>
      </div>
      <vk-notification :messages.sync="messages"></vk-notification>
      <app-breadcrumb :current-view="currentView" />
      <component v-bind:is="currentView"/>
    </vk-modal>
  </div>
</template>

3. 自己写个关闭按钮替代组件 #

如果上面两种方法都不太行，干脆不用vk-modal-close组件，自己写个按钮套用Vuikit的样式类，这样就能完全掌控点击事件了：

<template>
  <div class="uk-scope">
    <vk-modal :show="isShow" v-if="config">
      <!-- 用原生按钮+Vuikit的关闭样式 -->
      <button class="uk-modal-close-large" @click="handleModalClose"></button>
      <vk-notification :messages.sync="messages"></vk-notification>
      <app-breadcrumb :current-view="currentView" />
      <component v-bind:is="currentView"/>
    </vk-modal>
  </div>
</template>

<script>
export default {
  methods: {
    handleModalClose() {
      alert('hello!');
      this.isShow = false;
    }
  }
}
</script>

4. 检查Vuikit版本是否兼容 #

如果用的是比较老的Vuikit版本，可能存在事件绑定的bug，建议升级到最新的稳定版，或者去对应版本的文档里确认下组件事件的正确使用方式。

内容的提问来源于stack exchange，提问作者dendog