el-dropdown组件实现三级菜单

原创已于 2022-03-19 11:44:10 修改 · 4.6k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

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

vue 专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了如何利用Element UI组件库中的el-dropdown实现三级联动下拉菜单，菜单触发方式包括一级菜单点击及二级、三级菜单hover。在示例中，通过调整事件监听和显示设置，解决了鼠标移入三级菜单时二级菜单意外关闭的问题，确保了良好的用户体验。

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>

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