本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/menu

基础用法

普通导航菜单

  处理中心
    

      
      选项1
      选项2
      选项3
      

      
      选项1
      选项2
      选项3
   
  
  消息中心
  订单管理

垂直导航条

  
    
    
      
      选项1
      选项2
    
    
      选项3
    
    
      
      选项1
    
  
  
    
    导航二
  
  
    
    导航三
  
  
    
    导航四
  

折叠导航条

  展开
  收起


  
    
    
      分组一
      选项1
      选项2
    
    
      选项3
    
    
      选项4
      选项1
    
  
  
    
    导航二
  
  
    
    导航三
  
  
    
    导航四
  

Menu Attribute：

参数	类型	说明	可选值	默认值
mode	模式	string	horizontal / vertical	vertical
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	―	false
background-color	菜单的背景色（仅支持 hex 格式）	string	―	ffffff
text-color	菜单的文字颜色（仅支持 hex 格式）	string	―	303133
active-text-color	当前激活菜单的文字颜色（仅支持 hex 格式）	string	―	409EFF
default-active	当前激活菜单的 index	string	―	―
default-openeds	当前打开的sub-menu的 key 数组	Array	―	―
unique-opened	是否只保持一个子菜单的展开	boolean	―	false
menu-trigger	子菜单打开的触发方式(只在 mode 为 horizontal 时有效)	string	―	hover
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean	―	false

Menu Methods:

事件名称	说明	参数
open	展开指定的 sub-menu index:	需要打开的 sub-menu 的 index
close	收起指定的 sub-menu index:	需要收起的 sub-menu 的 index

Menu Events:

事件名称	说明	回调参数
select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
open	sub-menu 展开的回调	index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
close	sub-menu 收起的回调	index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path

SubMenu Attribute:

参数	说明	类型	可选值	默认值
mode	唯一标志	string	―	―
mode	弹出菜单的自定义类名	string	―	―
mode	展开 sub-menu 的延时	number	―	300
mode	收起 sub-menu 的延时	number	―	300
mode	是否禁用	boolean	―	false

Menu-Item Attribute:

参数	说明	类型	可选值	默认值
index	唯一标志	string	―	―
route	Vue Router 路径对象	Object	―	―
disabled	是否禁用	boolean	―	false

Menu-Group Attribute:

参数	说明	类型	可选值	默认值
title	分组标题	string	―	―

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。

您可能感兴趣的文章:

• 详解element-ui级联菜单（城市三级联动菜单）和回显问题
• vue element 生成无线级左侧菜单的实现代码
• 详解VUE Element-UI多级菜单动态渲染的组件
• vue.js+element-ui动态配置菜单的实例
• element-ui 设置菜单栏展开的方法
• 解决element-ui中下拉菜单子选项click事件不触发的问题
• vue.js与element-ui实现菜单树形结构的解决方法