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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
jquery选择器使用详解
Apr 08 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
教你一步步实现一个简易promise
Nov 02 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 if 想到的些问题
2008/03/22 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python上下文管理器和with块详解
2017/09/09 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python实现分数序列求和
2020/02/25 Python
荷兰超市:DEEN
2018/03/14 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
放假通知格式
2015/04/14 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
各种货币符号快捷输入
2022/02/17 杂记
python playwrigh框架入门安装使用
2022/07/23 Python