javascript - 使用 v-onclick Vue 2.0 隐藏父级。最大宽度 : 767px

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获取浏览器视口(viewport)宽度。

 $(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()
   })