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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
vue图片上传组件使用详解
Dec 23 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
星际玩家的三大定律
2020/03/04 星际争霸
Docker配置PHP开发环境教程
2016/12/21 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
青年创业培训欢迎词
2014/01/08 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
材料员岗位职责
2015/02/10 职场文书
工程质量保证书
2015/05/09 职场文书
网络妈妈观后感
2015/06/08 职场文书
吴仁宝观后感
2015/06/09 职场文书
python程序的组织结构详解
2021/12/06 Python