平武建站

Element-Ui组件NavMenu导航菜单的具体使用

本文来源于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模式stringhorizontal / verticalvertical
collapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean—false
background-color菜单的背景色（仅支持 hex 格式）string—ffffff
text-color菜单的文字颜色（仅支持 hex 格式）string—303133
active-text-color当前激活菜单的文字颜色（仅支持 hex 格式）string—409EFF
default-active当前激活菜单的 indexstring——
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
opensub-menu 展开的回调index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
closesub-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——
routeVue Router 路径对象Object——
disabled是否禁用boolean—false

Menu-Group Attribute:

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

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


新闻名称：Element-Ui组件NavMenu导航菜单的具体使用
转载源于：http://pwwzsj.com/article/ppgpce.html

其他资讯