[英]Hide parent with v-onclick Vue 2.0. max-width: 767px
Trying to build a dropdown-menu that will only be shown when screen is smaller than 767px. 尝试构建仅在屏幕小于767px时显示的下拉菜单。 There are two requirements here to hide the menu and those are: 这里有两个隐藏菜单的要求,分别是:
If someone clicks outside the menu and when a random router link is being clicked. 如果有人在菜单外单击,以及在单击随机路由器链接时。
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>
To show the menu according to screensize 根据屏幕尺寸显示菜单
You can use jquery to get browser viewport width. 您可以使用jquery获取浏览器的视口宽度。
$(window).width();
Then write a function which will check screen width and return true/false. 然后编写一个将检查屏幕宽度并返回true / false的函数。
showMenu() {
let screenWidth = $(window).width()
if (screenWidth < 767) {
return true
} else {
return false
}
}
To hide the menu 隐藏菜单
Write before each navigation guard to hide the menu. 在每个导航卫士之前写信以隐藏菜单。
router.beforeEach((to, from, next) => { this.hideMenu() // Hides the Menu next() })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.