Bootstrap-Vue多级下拉 [英] bootstrap-vue multi level drop down

问题描述

我正在使用bootstrap-vue，并且我有一个多级下拉菜单(针对类别).这是官方网站示例:

i'm using bootstrap-vue and i have a multi level drop down menu (for categories) . this is official site example :

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级下拉示例！我如何创建一个多层次的?

but i don't know how to create a multi level menu (i copy drop downs inside each other but it does not work) ! it has only 1 level drop down example ! how can i create a multi level one ?

tnx

推荐答案

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

So as I mentioned in my comments you can wrap b-dropdown events and do something custom like this:

<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>

    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()
        }
        })
    }

完整的示例可以在这里找到: Vue bootstrap嵌套下拉列表

Fully working example you can find here: Vue bootstrap nested dropdown

这篇关于Bootstrap-Vue多级下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！