在bootstap-vue中更改类的b-navbar切换

Question

我的bootstrap-vue页面上有一个<b-navbar>。导航栏是透明的，但在移动设备上单击(展开)时，我希望它是实心的。我计划通过使用CSS类将颜色从rgba(0, 0, 0, 0.05)更改为rgba(0, 0, 0, 1)来实现此目的。

我从https://bootstrap-vue.org/docs/components/navbar#comp-ref-b-navbar-toggle-events了解到，当我按下切换按钮时，会触发一个称为“本机单击事件对象”的东西。我已经安装了Vue Devtools，每次我按下导航栏切换按钮时，我都可以看到这个事件被触发。

我的问题是，为了切换导航栏的CSS类，我如何侦听此事件？

Answer 1

对于您来说，使用导航栏<b-collapse>上的v-model可能会更容易一些，它用于在移动设备上扩展内容。

展开时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>

​