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 编程笔记 无名函数
Jun 28 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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的Yii框架入门使用教程
2016/02/15 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
大学生自我鉴定
2013/12/16 职场文书
请假条标准格式规范
2014/04/10 职场文书
保密协议书范本
2014/04/22 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android