Element-Ui组件NavMenu导航菜单的具体使用-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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 时可用)booleanfalse
background-color菜单的背景色(仅支持 hex 格式)stringffffff
text-color菜单的文字颜色(仅支持 hex 格式)string303133
active-text-color当前激活菜单的文字颜色(仅支持 hex 格式)string409EFF
default-active当前激活菜单的 indexstring
default-openeds当前打开的sub-menu的 key 数组Array
unique-opened是否只保持一个子菜单的展开booleanfalse
menu-trigger子菜单打开的触发方式(只在 mode 为 horizontal 时有效)stringhover
router是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转booleanfalse

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 的延时number300
mode收起 sub-menu 的延时number300
mode是否禁用booleanfalse

Menu-Item Attribute:

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

Menu-Group Attribute:

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

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


本文标题:Element-Ui组件NavMenu导航菜单的具体使用
链接URL:http://kswsj.cn/article/ppgpce.html

其他资讯