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 相关文章推荐
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python解析中国天气网的天气数据
2014/03/21 Python
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python实现维吉尼亚加密法
2019/03/20 Python
详解Python3 pickle模块用法
2019/09/16 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
浅析Python __name__ 是什么
2020/07/07 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
企业管理部经理岗位职责
2013/12/24 职场文书
初中音乐教学反思
2014/01/12 职场文书
高三英语教学反思
2014/01/13 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
公积金具结保证书
2015/05/11 职场文书
研讨会致辞
2015/07/31 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python