el-dropdown组件实现三级菜单

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>

效果图