bootstrap - vue панель навигации не разворачивается на мобильном устройстве при нажатии кнопки на панели навигации. - PullRequest
Новая
       122

bootstrap - vue панель навигации не разворачивается на мобильном устройстве при нажатии кнопки на панели навигации.

0 голосов
/ 26 мая 2020

Я использовал bootstrap - vue для реализации навигационной панели в моем приложении vue. js. При щелчке по элементам панель навигации разворачивается, как и ожидалось. Я заменил один из элементов навигации на, чтобы выделить его и присвоить ему CSS, но при нажатии кнопки навигация работает правильно, но меню остается свернутым. Есть ли способ заставить его развернуться? 

<template>
  <b-navbar toggleable="lg" type="light">
    <b-navbar-brand to="/"> <img src="static/img/logo.svg" width="220px"></b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item to="/about-us">About Us</b-nav-item>
        <b-nav-item to="/landlords">Landlords</b-nav-item>
        <b-nav-item to="#">Tenants</b-nav-item>
        <b-button class=" " to="/search">Valuation</b-button>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

1 Ответ

1 голос
/ 26 мая 2020

Стилизация собственного b-nav-item

Самым простым решением было бы придерживаться b-nav-item и применять свои классы к элементу, используя атрибут class, чтобы добавить класс к li , или опору link-classes, чтобы добавить его к визуализированному тегу a.

Таким образом вы позволяете Bootstrap - Vue обрабатывать закрытие коллапса, делая его более надежным в будущем на случай, если что-то изменится в будущее. 

new Vue({
  el: '#app'
})
<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-navbar toggleable="lg" type="light">
    <b-navbar-brand to="#">
      LOGO
    </b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item to="#">About Us</b-nav-item>
        <b-nav-item to="#">Landlords</b-nav-item>
        <b-nav-item to="#">Tenants</b-nav-item>
        <b-nav-item to="#" link-classes="btn btn-primary text-white">
          Valuation
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

Закрытие сворачивания вручную

Другой вариант - закрыть сворачивание, добавив обработчик кликов к вашему пользовательскому элементу на панели навигации, которая закрывает коллапс, если он открыт. 

new Vue({
  el: '#app',
  data() {
    return {
      isCollapseOpen: false
    }
  },
  methods: {
    closeNavCollapse() {
      if(this.isCollapseOpen) {
        this.$root.$emit('bv::toggle::collapse', 'nav-collapse')
      }
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-navbar toggleable="lg" type="light">
    <b-navbar-brand to="/">LOGO</b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse v-model="isCollapseOpen"  id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item to="#">About Us</b-nav-item>
        <b-nav-item to="#">Landlords</b-nav-item>
        <b-nav-item to="#">Tenants</b-nav-item>
        <b-button to="#" variant="primary" @click="closeNavCollapse">
          Valuation
        </b-button>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

Использование наблюдателя для автоматического обнаружения изменений маршрута.

В качестве альтернативы вы можете использовать наблюдатель и определять, когда маршрут изменения и вручную закрыть коллапс.

...