在vue 2中单击外部后隐藏元素

Question

我正在尝试使用 Vue 2 和 laravel 在外部单击后隐藏侧边栏。此侧边栏是在导航栏组件内创建的。一开始我加了一个@click="showSidenav = !showSidenav"只是为了打开它，初始化数据到showSidenav: false。并且还添加了一个关闭锚标签来隐藏侧边栏。实际上工作正常，但是当我想到在侧边栏外单击时如何隐藏它呢？我创建了一个方法showSidenav 并执行元素的打开并尝试使用nextTick，但它与我调用该方法的时间相同。现在我在方法中使用 jquery 再次更改数据，但是当我再次单击汉堡菜单时，它不会更改数据。

template structure

<a href="#" v-on-clickaway="away" @click="openSidenav">Hamburger menu</a>

脚本

 import { mixin as clickaway } from 'vue-clickaway';
    export default {
         mixins: [ clickaway ],
         data() {
             return {
                 showSidenav: false,
             }
         },
         methods: {
             openSidenav: function () {
                 this.showSidenav = true
             },
             away: function () {
                this.showSidenav = false
             }
         }
    }

编辑：按照@Nathan 的建议添加了vue-clickaway。

Answer 1

我刚遇到这个问题。使用vue-clickaway。

他们的“hello world”示例：

import { mixin as clickaway } from 'vue-clickaway';

export default {
  mixins: [ clickaway ],
  template: '<p v-on-clickaway="away">Click away</p>',
  methods: {
    away: function() {
      console.log('clicked away');
    },
  },
};