elementUI+vue实现分类导航弹出多级菜单悬浮展示（鼠标悬停时显示）

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"  :open-delay="300">
                    <div slot="content" v-for="item in categoryList" :key="item.id">
                      <el-cascader-panel v-model="currentActiveTwo" :options="item.children" @change="handleChangeCategoryTwo($event, item.id)" :props="{ expandTrigger: 'hover' }"></el-cascader-panel>
                    </div>
                    <span @click="handleChangeCategory('')">产品分类</span>
                  </el-tooltip>
                </div>
              </div>
            </div>

data部分

categoryList : [
        { value: '服饰内衣', label: '服饰内衣',
          children: [
              {
                value: '女装',
                label: '女装',
                children:[
                  {
                    value: '女童装',
                    label: '女童装',
                  }
                ]
              },
              {value: '男装', label: '男装' },
              {value: '婴童装/亲子装', label: '婴童装/亲子装' },
              {value: '14', label: '内衣/袜子' },
              {value: '15', label: '家居服' },
              {value: '16', label: '其他' }
          ]
        }
      ],
      categoryActive : '', // 当前选中的一级
      currentActiveTwo : '', // 当前选中的二级

method 部分

// 一级菜单点击事件
    handleChangeCategory(e){
      this.categoryActive = e
      this.currentActiveTwo = ''
    },
    // 二级菜单点击事件
    handleChangeCategoryTwo(e, bigC){
      this.categoryActive = bigC
      this.currentActiveTwo = e
    }