我试图在使用 Vue 2 和 laravel 单击外部后隐藏侧边栏。这个侧边栏是在导航栏组件中创建的。起初,我添加了一个 @click="showSidenav = !showSidenav"
只是为了打开它并将数据初始化为 showSidenav: false
。并且还添加了一个关闭 anchor 标记来隐藏侧边栏。实际上工作正常,但是当我想到在侧边栏外单击时也隐藏它怎么样?我创建了一个方法 showSidenav
并执行元素的打开并尝试使用 nextTick
但它在我调用该方法时同时执行。现在,我在方法中使用 jquery 再次更改数据,但是当我再次单击汉堡菜单时,它不会更改数据。
<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.
最佳答案
我刚遇到这个问题。使用 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');
},
},
};
关于jquery - 在 vue 2 中单击外部后隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44953567/