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。

他们的“你好世界”的例子：

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中单击外部后隐藏元素

1 个答案: