Блог

У меня есть <b-navbar> на моей странице bootstrap-vue. Панель навигации прозрачна, но при нажатии (расширении) на мобильном устройстве я хочу, чтобы она была сплошной. Я планирую добиться этого, изменив цвет с rgba(0, 0, 0, 0.05) на rgba(0, 0, 0, 1) использование классов CSS.

Я понимаю из https://bootstrap-vue.org/docs/components/navbar#comp-ref-b-navbar-toggle-events что есть что-то, называемое «Собственный объект события щелчка», срабатывающий, когда я нажимаю кнопку переключения. Я установил Vue Devtools, и я вижу, что это событие срабатывает каждый раз, когда я нажимаю кнопку переключения navbar.

Мой вопрос в том, как я могу прослушать это событие, чтобы также переключить класс CSS панели навигации?

Возможно, вам было бы проще вместо этого использовать v-model на панели навигации <b-collapse> , которая используется для расширения содержимого на мобильных устройствах.

Значение v-model , будет true при расширении и false в противном случае. Вы можете использовать это для условного переключения между классами на панели навигации.

 new Vue({
  el: '#app',
  data() {
    return {
      isOpen: false
    }
  }
})  

 <link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.17.1/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.17.1/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-navbar toggleable="lg" type="dark" :class="[isOpen ? 'bg-dark' : 'bg-primary']">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse v-model="isOpen" id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link 1</b-nav-item>
        <b-nav-item href="#">Link 2</b-nav-item>
        <b-nav-item href="#">Link 3</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>