我希望侧边栏下拉菜单一次只能显示一个,因此当我点击另一个下拉菜单时,前一个下拉菜单将再次隐藏。
下面是我当前下拉列表的示例,您可以在其中一次打开多个下拉列表。 https://coreui.io/vue/demo/#/dashboard
<template>
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
<ul class="nav-dropdown-items">
<slot></slot>
</ul>
</router-link>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
},
url: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
}
},
methods: {
handleClick(e) {
e.preventDefault();
e.target.parentElement.classList.toggle('open');
}
}
};
</script>
请帮忙。
最佳答案
制作 radio 组类型 Controller (一次只能选择一项)的通常方法是使用一个变量来指示选择了哪一项。然后每个元素将自己与选定的元素进行比较,以确定它是否应该处于打开状态。
由于您有多个相互不了解的 router-link
,因此父对象必须拥有 which-one-is-selected 指示符变量。 router-link
的 handleClick
应该是 $emit
an event父级将通过更改指示变量来处理。 router-link
应该接收指示变量作为 prop并在 computed 中使用它适本地设置 open
类。
您的代码可能如下所示:
<template>
<router-link tag="li" class="nav-item nav-dropdown" :class="openClass" :to="url" disabled>
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
<ul class="nav-dropdown-items">
<slot></slot>
</ul>
</router-link>
</template>
<script>
export default {
props: {
name: {
type: String,
default: '',
selectedItem: Object
},
url: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
}
},
computed: {
openClass() {
return this.selectedItem === this ? 'open' : '';
}
}
methods: {
handleClick(e) {
e.preventDefault();
this.$emit('setSelected', this);
}
}
};
</script>
关于javascript - CoreUI 一次只有一个下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51162229/