Navbar Toggler Bootstrap с 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

• 1000 1006 * установлен jquery и импортирован переключил событие сворачивания, используя событие root

<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>, который покрывает весь экран прямо под вашей навигационной панелью. К которому мы затем можем привязать событие @click, чтобы свернуть панель навигации.

Оно привязано к b-collapse v-модели, так что оно отображается только при открытии коллапса.

Вы даже можете добавить элемент <transition> вокруг фона, если вам нужно какое-то затухание для фона. (Не удалось заставить это работать в фрагменте Stackoverflow, но вы можете увидеть пример здесь

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 3

Один обходной путь - думать об этом как о модальном окне. Каждый раз, когда панель навигации переключается, создайте невидимую сетку позади панели навигации с помощью обработчика щелчков, чтобы закрыть панель навигации.

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