使用v-onclick Vue 2.0隐藏父级。 最大宽度：767像素

Question

尝试构建仅在屏幕小于767px时显示的下拉菜单。 这里有两个隐藏菜单的要求，分别是：

如果有人在菜单外单击，以及在单击随机路由器链接时。

 export default { name: 'navbar', data() { return { isShow: false } }, methods: { onClick(e) { isShow = false } } } 

 <button v-on:click ="isShow = !isShow">Click ME</button> <div class="router" v-show="isShow"> <router-link to="/" class="nav-link" v-on:click.prevent="onClick()">Home</router-link> <router-link to="/phones" class="nav-link">Phones</router-link> <router-link to="/moreproducts" class="nav-link">More Products</router-link> <router-link to="/blogs" class="nav-link">Support</router-link> <router-link to="/news" class="nav-link">News</router-link> </div> </div> 

Answer 1

根据屏幕尺寸显示菜单

您可以使用jquery获取浏览器的视口宽度。

 $(window).width(); 

然后编写一个将检查屏幕宽度并返回true / false的函数。

showMenu() {
  let screenWidth = $(window).width()
  if (screenWidth < 767) {
    return true
  } else {
    return false
  }
}

隐藏菜单

1. 使用Vue Clickaway检查是否有人在菜单外单击。

2. 在每个导航卫士之前写信以隐藏菜单。

    router.beforeEach((to, from, next) => { this.hideMenu() // Hides the Menu next() })