在 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
             }
         }
    }

EDIT: Added vue-clickaway as suggested by @Nathan.

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');
    },
  },
};

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

Hiding an element after clicking outside in vue 2

jquery

vue.js