bootstrap-vue 多级下拉菜单

Question

我正在使用 bootstrap-vue 并且我有一个多级下拉菜单（用于类别）。这是官方网站示例：

https://bootstrap-vue.org/docs/components/dropdown

<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
  <b-dropdown-item>First Action</b-dropdown-item>
  <b-dropdown-item>Second Action</b-dropdown-item>
</b-dropdown>

但我不知道如何创建一个多级菜单（我相互复制下拉菜单但它不起作用）！它只有 1 个级别的下拉示例！我怎样才能创建一个多层次的？

tnx

Answer 1

因此，正如我在评论中提到的，您可以包装b-dropdown事件并执行以下自定义操作：

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        isDropdown2Visible: false
      }
    },
    mounted: function () {
      this.$root.$on('bv::dropdown::show', bvEvent => {
        if(bvEvent.componentId === 'dropdown-2') {
          this.isDropdown2Visible = true;
        }
        })
      this.$root.$on('bv::dropdown::hide', bvEvent => {
        if(bvEvent.componentId === 'dropdown-2') {
          this.isDropdown2Visible = false;
        }
        if(this.isDropdown2Visible) {
          bvEvent.preventDefault()
        }
        })
    }
  })
}

body { padding: 1rem; }

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-dropdown id="dropdown-1" text="Dropdown Button 1" class="m-md-2">
    <b-dropdown-item>First Action 1</b-dropdown-item>
    <b-dropdown-item>Second Action 1</b-dropdown-item>
    <b-dropdown id="dropdown-2" text="Dropdown Button 2" class="m-md-2">
        <b-dropdown-item>First Action 2</b-dropdown-item>
        <b-dropdown-item>Second Action 2</b-dropdown-item>
    </b-dropdown>
  </b-dropdown>
</div>