点击其他地方关闭弹框：vue-click-outside包

Question

问题：使用@click事件打开一个div弹出框，点击其他地方如何让它关闭？
解决方案：下载一个vue-click-outside包
步骤：

1. npm install vue-click-outside
2. 在代码中的使用方法：

<template>
  <div>
    <div v-click-outside="hide" @click="toggle">Toggle</div>
    <div v-show="opened">Popup item</div>
  </div>
</template>
 
<script>
import ClickOutside from 'vue-click-outside'
 
export default {
  data () {
    return {
      opened: false
    }
  },
 
  methods: {
    toggle () {
      this.opened = true
    },
 
    hide () {
      this.opened = false
    }
  },
 
  mounted () {
    // prevent click outside event with popupItem.
    this.popupItem = this.$el
  },
 
  // do not forget this section
  directives: {
    ClickOutside
  }
}
</script>

Answer 1

【相关推荐】

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：vue中@click.native的使用
• 除此之外, 这篇博客: vue.js 多方总结中的 click 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
  • 类型：Boolean
  • 默认值：false
  • 作用：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。但是自定义的 click 事件会阻止一些原生组件的行为，如 checkbox 的选中等，所以一旦滚动列表中有一些原生表单组件，推荐的做法是监听 tap 事件

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^