elementUI+vue实现商城分类导航弹出二级菜单悬浮展示（鼠标经过时显示）

效果

二级菜单显示是用了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>