bootstrap-vue 多级下拉菜单
Posted
技术标签:
【中文标题】bootstrap-vue 多级下拉菜单【英文标题】：bootstrap-vue multi level drop down 【发布时间】：2020-12-01 02:07:08 【问题描述】：我正在使用 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
【问题讨论】：
vue-bootstrap 还不支持多级 [github.com/bootstrap-vue/bootstrap-vue/issues/3435](Thread) 真的吗？我该怎么办？ :// 你知道哪个事件是通过这个<b-dropdown传播的
什么？你的意思是 ？不，我不知道这些事件！！！
如果你 preventDefault 事件，那么你可以将 b-dropdown 嵌套在 b-dropdown 中
【参考方案1】：
正如我在 cmets 中提到的，您可以包装 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>【讨论】：
【参考方案2】：你可以试试这样的
此 sn-p 包含一级菜单的逻辑。您可以将代码编辑为 根据您的要求
JSBin Link
new Vue(
el: "#app",
data:
menu: [
title : 'one',
title : 'two',
title : 'three',showSubMenu : false,
children : [
title : 'four',
title : 'five',
],
]
,
methods :
toogleItem(index)
if(this.menu[index].children)
if(!this.menu[index].showSubMenu)
this.menu[index].showSubMenu = true
else
this.menu[index].showSubMenu = false
).sub-menu
position: absolute;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div id="app">
<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
<b-dropdown-item
v-for="(item,index) in menu"
:key="index"
@mouseover.native="toogleItem(index)"
@mouseout.native="toogleItem(index)">
<span>item.title <b-icon-caret-down-fill :scale="0.6" v-if="item.children"></b-icon-caret-down-fill></span>
<div v-if="item.children" class="sub-menu" v-show="item.showSubMenu">
<b-dropdown-item v-for="(item,index) in item.children" :key="index">item.title
</b-dropdown-item>
</div>
</b-dropdown-item>
</b-dropdown>
</div>
</body>
</html>【讨论】：
看起来不适用于仅使用键盘的导航，因此使用屏幕阅读器之类的东西的人可能无法访问嵌套的下拉菜单。 @Hiws 这只是为了让事情顺利进行。如果需要考虑触摸支持，则需要做其他事情以上是关于bootstrap-vue 多级下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章