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


Posted in Javascript onOctober 24, 2019

本文来源于Element官方文档:

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

基础用法

普通导航菜单

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">

      <template slot="title">我的工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
      <el-submenu index="2-4">

      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
   </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" rel="external nofollow" target="_blank">订单管理</a></el-menu-item>
</el-menu>

垂直导航条

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>导航一</span>
    </template>
    <el-menu-item-group>
      <template slot="title">分组一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">选项4</template>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

折叠导航条

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分组一</span>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
JavaScript中的this机制
Jan 30 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 #Javascript
js实现简单掷骰子效果
Oct 24 #Javascript
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
JS控制GIF图片的停止与显示
Oct 24 #Javascript
js计时事件实现圆形时钟
Mar 25 #Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 #Javascript
You might like
PHP parse_url 一个好用的函数
2009/10/03 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php链表用法实例分析
2015/07/09 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python读写文件操作示例程序
2013/12/02 Python
python daemon守护进程实现
2016/08/27 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
C#的几个面试问题
2016/05/22 面试题
化工工艺设计求职信
2014/06/25 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
神州牡丹园的导游词
2019/11/20 职场文书