当在导航栏上单击按钮时，bootstrap-vue 导航栏不会在移动设备中展开

Question

我使用 bootstrap-vue 在我的 vue.js 应用程序上实现了一个导航栏。单击元素时，导航栏按预期展开。我已经用 a 替换了其中一个 navitem，因此我可以让它脱颖而出并赋予它自己的 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>

Answer 1

风格原生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>

使用观察者自动检测路由变化。

或者，您可以使用watcher 并检测路线何时更改并手动关闭折叠。