el-dropdown组件实现三级菜单

kaiup

已于 2022-03-19 11:44:10 修改

阅读量4k

点赞数 6

分类专栏： vue 文章标签： Element UI 下拉菜单三级联动 Vue.js 交互设计

于 2022-03-19 11:28:40 首次发布

本文链接：https://blog.csdn.net/kaiup/article/details/123590994

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

el-dropdown组件实现三级菜单

一级菜单点击触发，二级、三级hover触发

<el-dropdown trigger="click">
   <span class="el-dropdown-link">
     下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item @mouseleave.native="() => {$refs.subDropdown.hide()}">衣服</el-dropdown-item>
     <el-dropdown-item @mouseleave.native="() => {$refs.subDropdown.hide()}">鞋子</el-dropdown-item>
     <el-dropdown-item>
       <!-- 二级菜单 -->
       <el-dropdown trigger="click" placement="right-start" :show-timeout="0" ref="subDropdown">
         <!-- 手动控制hover显示，解决鼠标移入三级菜单时二级菜单消失问题 -->
         <span @mouseenter="() => {$refs.subDropdown.show()}">包包</span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>古驰</el-dropdown-item>
           <el-dropdown-item>
           	<!-- 三级菜单 -->
           	<el-dropdown trigger="hover" :show-timeout="0" placement="right-start">
	           <span>香奈儿</span>
	           <el-dropdown-menu slot="dropdown">
	             <el-dropdown-item>CHANEL系列</el-dropdown-item>
	             <el-dropdown-item>Boy系列</el-dropdown-item>
	             <el-dropdown-item>Chanel 19系列</el-dropdown-item>
	           </el-dropdown-menu>
       		</el-dropdown>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </el-dropdown-item>
   </el-dropdown-menu>
</el-dropdown>

效果图
在这里插入图片描述