[英]Navbar Toggler Bootstrap with VueJS - close on click outside directive
Does anyone know if there is a simple method of closing the Boostrap-VueJS toggle navbar when clicking outside?有谁知道在点击外部时是否有一种简单的方法可以关闭 Boostrap-VueJS 切换导航栏?
I've tried multiple directive codes, tried the vue-click-outside plugin, and many different examples but without luck.我尝试了多个指令代码,尝试了 vue-click-outside 插件,以及许多不同的示例,但没有运气。 It seems that when I try to bypass the vue bootstrap component, the hamburger toggle button stops working.
似乎当我尝试绕过 vue bootstrap 组件时,汉堡切换按钮停止工作。
Here is my code:这是我的代码:
<b-navbar toggleable="lg" fixed="top">
<b-navbar-brand class="header-name" :to="{name: 'homeLink'}">Test</b-navbar-brand>
<b-navbar-toggle class="custom-toggler" target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto" >
<b-nav-form>
</b-nav-form>
<b-nav-item :to="{name: 'homeLink'}">Home</b-nav-item>
<b-nav-item :to="{name: 'test1'}">test</b-nav-item>
<b-nav-item :to="{name: 'test2'}" >test</b-nav-item>
<b-nav-item :to="{name: 'test3'}" >test</b-nav-item>
<b-nav-item :to="{name: 'test4'}" >test</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
I finally got it to work via using the following mechanism:我终于通过使用以下机制让它工作:
<template>
<div>
<b-navbar toggleable="lg" fixed="top">
<b-navbar-brand class="header-name" :to="{name: 'homeLink'}">test</b-navbar-brand>
<b-navbar-toggle class="custom-toggler" target="nav-collapse" v-click-outside="hide"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto" >
<b-nav-form>
</b-nav-form>
<b-nav-item :to="{name: 'homeLink'}">Home</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
import ClickOutside from 'vue-click-outside'
import * as $ from 'jquery';
export default {
name: 'appHeader',
data() {
},
mounted () {
// prevent click outside event with popupItem.
this.popupItem = this.$el
},
methods:{
hide(){
console.log('hiding')
this.$root.$emit('bv::toggle::collapse', 'nav-collapse')
}
},
directives: {
ClickOutside
},
}
</script>
One workaround is to think of it like a modal.一种解决方法是将其视为模态。 Whenever the navbar is toggled, create an invisible scrim behind the navbar, with a click handler to close the navbar.
每当切换导航栏时,在导航栏后面创建一个不可见的稀松布,并使用单击处理程序来关闭导航栏。
<div
v-if="navOpen"
@click="navOpen = false"
style="position:fixed;left:0;top:0;right:0;bottom:0;z-index:0">
</div>
Here's a working example of what Erich suggested.这是 Erich 建议的一个工作示例。
This will create a <div>
that covers the entire screen, just under your navbar.这将创建一个覆盖整个屏幕的
<div>
,就在您的导航栏下方。 Which we can then bind a @click
event to, to collapse the navbar.然后我们可以绑定一个
@click
事件来折叠导航栏。
It's bound to the b-collapse
v-model, so that it only shows when the collapse is open.它绑定到
b-collapse
v-model,因此它仅在折叠打开时显示。
You can even add a <transition>
element around the backdrop if you want some sort of fade for the backdrop.如果您想为背景添加某种淡入淡出效果,您甚至可以在背景周围添加
<transition>
元素。 (Couldn't get this working in a Stackoverflow Snippet, but you can see an example here (无法在 Stackoverflow Snippet 中使用此功能,但您可以在此处查看示例
new Vue({ el: "#app", data() { return { isNavbarCollapseOpen: false }; } });
.navbar-backdrop { z-index: 1029; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet" /> <script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script> <div id="app"> <b-navbar toggleable="xl" fixed="top" variant="dark" type="dark"> <b-navbar-brand class="header-name":to="{name: 'homeLink'}">Test</b-navbar-brand> <b-navbar-toggle class="custom-toggler" target="nav-collapse"></b-navbar-toggle> <b-collapse v-model="isNavbarCollapseOpen" id="nav-collapse" is-nav> <:-- Right aligned nav items --> <b-navbar-nav class="ml-auto"> <b-nav-form> </b-nav-form> <b-nav-item:to="{name: 'homeLink'}">Home</b-nav-item> <b-nav-item:to="{name: 'test1'}">test</b-nav-item> <b-nav-item:to="{name: 'test2'}">test</b-nav-item> <b-nav-item:to="{name: 'test3'}">test</b-nav-item> <b-nav-item:to="{name: 'test4'}">test</b-nav-item> </b-navbar-nav> </b-collapse> </b-navbar> <div v-if="isNavbarCollapseOpen" @click="isNavbarCollapseOpen = false" class="navbar-backdrop"> </div> <p v-for="i in 50">Some content</p> </div>
I figureout using this method: https://stackoverflow.com/a/50174966/12647927我用这种方法弄清楚: https://stackoverflow.com/a/50174966/12647927
import * as $ from 'jquery'
watch: {
'$route' () {
$('#navbarCallejeritos').collapse('hide')
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.