效果
二级菜单显示是用了elementUI
的两个组件:el-tooltip
+ el-cascader-panel
vue代码
<!-- 分类 -->
<div class="category-box">
<span class="category-label">分类</span>
<div class="flex-1">
<div class="category-list">
<el-tooltip effect="light" content="" placement="bottom" popper-class="category-two-menu-box" v-for="item in categoryList" :key="item.id" :open-delay="300">
<div slot="content" v-if="item.children.length > 0">
<el-cascader-panel v-model="currentActiveTwo" :options="item.children" @change="handleChangeCategoryTwo($event, item.id)" :props="{ expandTrigger: 'hover' }"></el-cascader-panel>
</div>
<span :class="[categoryActive == item.id ? 'category-item-active':'']" class="category-item" @click="handleChangeCategory(item.id)">{{item.label}}</span>
</el-tooltip>
</div>
</div>
</div>
categoryList = [
{ value: '', label: '全部', children:[]},
{ value: '服饰内衣', label: '服饰内衣', children: [{value: '女装', label: '女装' },{value: '男装', label: '男装' },{value: '婴童装/亲子装', label: '婴童装/亲子装' },{value: '14', label: '内衣/袜子' },{value: '15', label: '家居服' },{value: '16', label: '其他' }] },
{ value: '食品饮料', label: '食品饮料', children: [{value: '零食/坚果/特产', label: '零食/坚果/特产' },{value: '酒水/饮料', label: '酒水/饮料' },{value: '茶', label: '茶' },{value: '粮油米面/南北干货/调味品', label: '粮油米面/南北干货/调味品' },{value: '乳品/咖啡/冲调', label: '乳品/咖啡/冲调' },{value: '方便速食/速冻食品', label: '方便速食/速冻食品' },{value: '其他', label: '其他' }] }]
categoryActive = '' // 当前选中的一级
currentActiveTwo = '' // 当前选中的二级
// 一级菜单点击事件
handleChangeCategory(e){
this.categoryActive = e
this.currentActiveTwo = ''
}
// 二级菜单点击事件
handleChangeCategoryTwo(e, bigC){
this.categoryActive = bigC
this.currentActiveTwo = e
}
<style lang="less" scoped>
.category-box{
display: flex;
font-size: 14px;
.category-label{
min-width: 50px;
color: #999;
padding-top: 3px;
padding-right: 15px;
}
.category-list{
display: flex;
flex-flow: row wrap;
align-items: center;
.category-item {
margin: 0 10px 5px 0;
padding: 4px 10px;
color: #666;
border-radius: 12px;
outline: none;
cursor: pointer;
&-active{
color: #ff7752;
font-weight: 500;
background-color: #ddebf8;
}
}
}
}
.flex-1 {
flex: 1;
}
</style>
覆盖element样式的部分,不能放在scoped
里,需要直接放在style
标签里
<style>
.category-two-menu-box.el-tooltip__popper.is-light{
box-shadow: 0 2px 12px 0 #e1e3e6;
border: 1px solid #f0f0f0;
}
.category-two-menu-box.el-tooltip__popper {
padding: 0;
}
.category-two-menu-box .el-cascader-node:hover {
color: #ff7752;
}
.category-two-menu-box .el-cascader-node.is-active {
color: #ff7752;
}
.category-two-menu-box.el-tooltip__popper.is-light .el-cascader-panel.is-bordered {
border-radius: 0;
border: 0 none;
}
.category-two-menu-box.el-tooltip__popper.is-light .popper__arrow {
border-bottom-color: #f0f0f0!important;
}
</style>