Navbar Toggler Bootstrap with VueJS - 在點擊外部指令時關閉

Question

有誰知道在點擊外部時是否有一種簡單的方法可以關閉 Boostrap-VueJS 切換導航欄？

我嘗試了多個指令代碼，嘗試了 vue-click-outside 插件，以及許多不同的示例，但沒有運氣。 似乎當我嘗試繞過 vue bootstrap 組件時，漢堡切換按鈕停止工作。

這是我的代碼：

<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>

Answer 1

我終於通過使用以下機制讓它工作：

1. 安裝了vue-click-outside package
2. 導入並遵循 package 頁面的說明
3. 安裝 jquery 並導入
4. 使用根事件切換折疊事件

<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>

Answer 2

一種解決方法是將其視為模態。 每當切換導航欄時，在導航欄后面創建一個不可見的稀松布，並使用單擊處理程序來關閉導航欄。

<div 
  v-if="navOpen" 
  @click="navOpen = false" 
  style="position:fixed;left:0;top:0;right:0;bottom:0;z-index:0">
</div>

Answer 3

這是 Erich 建議的一個工作示例。

這將創建一個覆蓋整個屏幕的<div> ，就在您的導航欄下方。 然后我們可以綁定一個@click事件來折疊導航欄。

它綁定到b-collapse v-model，因此它僅在折疊打開時顯示。

如果您想為背景添加某種淡入淡出效果，您甚至可以在背景周圍添加<transition>元素。 （無法在 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>

Answer 4

我用這種方法弄清楚： https://stackoverflow.com/a/50174966/12647927

import * as $ from 'jquery'

watch: {
'$route' () {
  $('#navbarCallejeritos').collapse('hide')
  },
},