<el-menu>菜单标签(里面可以包括:<el-submenu>和<el-menu-item>)
<el-menu>
1、router属性,若使用router属性menu-item的index将对应router的path属性
2、mode,下拉菜单的模式分为horizontal和vertical两种模式
3、background-color,background-color属性为下拉菜单整体的背景颜色
4、text-color,text-color为下拉菜单中的文字的颜色
5、active-text-color为选中的菜单的颜色
<el-menu>标签中可以有el-submenu和el-menu-item标签组成
demo

<el-menu :router="true" mode="horizontal" background-color="#1c213f" text-color="#fff">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-menu"></i>
</template>
<el-menu-item index="1-1">选项一</el-menu-item>
<el-submenu index="2">
<template slot="title">选项二</template>
<el-menu-item index="2-1">选项二-一</el-menu-item>
</el-submenu>
</el-menu>

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 的 index 的数组 | Array | — | — |
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
| menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | hover / click | hover |
| router | 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false |
| collapse-transition | 是否开启折叠动画 | boolean | — | true |
<el-menu>菜单标签(里面可以包括:<el-submenu>和<el-menu-item>)的更多相关文章
- Tkinter 之Menu菜单标签
一.参数说明 语法 作用 MenuBar = tk.Menu(window) 创建一个菜单栏 fileBar = tk.Menu(MenuBar, tearoff=0) 创建一个菜单项,不分窗. Me ...
- Cocos2d—X游戏开发之CCToggle(菜单标签切换)CCControlSwitch(开关切换)
Cocos2d—X游戏开发之CCToggle(菜单标签切换) 首先继承子CCMenu,是菜单标签中的一种.‘ class CC_DLL CCMenuItemToggle : public CCMenu ...
- Android添加Menu菜单
在安卓中添加Menu菜单十分简单. 步骤: 1.在menu文件夹中的main.xml文件中添加要添加的项目. <menu xmlns:android="http://schemas.a ...
- Android4.0 -- UI控件之 Menu 菜单的的使用(一)
这一讲开始我们来讲一下Android中菜单的使用方法,菜单是应用中的普通的组件,主要是提供友好和专注的用户体验,你可以在你的Activity中使用 Menu APIs 来提供用户动作和其他选项的操 ...
- [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
本篇讲解菜单.绘图.还有大小变更控件.菜单控件可以附加到各种其他控件中,比如按钮.工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单):ext对绘图的支持可以让我们通过js来绘图:大小变更控件可以让 ...
- Android开发中的menu菜单
复写onCreateOptionsMenu方法,当点击menu菜单时,调用该方法. @Override public boolean onCreateOptionsMenu(Menu menu) { ...
- SharePoint 2013 激活标题字段外的Menu菜单
前言 SharePoint 有个很特别的字段,就是标题(Title)字段,无论想要链接到项目,还是弹出操作项目的菜单,都是通过标题字段,一直以来需要的时候,都是通过将标题字段改名进行的. 其实,Sha ...
- Ecshop 后台增加一个左侧列表菜单menu菜单的方法
Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...
- 后台增加一个左侧列表菜单menu菜单的方法
Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...
随机推荐
- Ubuntu - apt 下载源设置为阿里的源
# 备份 sources.list cp /etc/apt/sources.list /etc/apt/sources.list.bak # 切换为阿里的源 echo "deb http:/ ...
- 移动端自动化==>AppiumApi接口详解
Appium 初始化配置信息(Desired Capabilities) Desired Capabilities实际上就是一个字典,它主要用于向Appium Server提供初始化配置参数,如:想要 ...
- c语言字串指针 char*
c语言中 char* 不仅能存字符串,还能存二进制数据,所以它的用途因使用者而定. char* 在很多使用场景下,是需要存储ascii码为0的元素的,这样就必须注意一个问题,那就是char*的长度. ...
- c# 跨应用程序域通讯
public class MyTask { public class MyEventArgs : EventArgs { public object EventData { get; private ...
- Linux的远程桌面折腾指南
因为实验服务器需要远程提供给研一童鞋使用,这两天折腾了一下Linux的远程桌面,在此记录总结一下.服务器系统为Lubuntu 16.04 远程登录到Linux 方案一:简单使用--x11vnc 单用户 ...
- 【Linux开发】OpenCV在ARM-linux上的移植过程遇到的问题1---cvNamedWindow调用报错的问题
问题描述: 这个实际上是最后一部的问题,将生成的共享库文件放入到了/usr/local/opencv-arm/lib下,并且设置了LD_LIBRARY_PATH中为/usr/local/opencv- ...
- Flask框架(三)—— 请求扩展、中间件、蓝图、session源码分析
Flask框架(三)—— 请求扩展.中间件.蓝图.session源码分析 目录 请求扩展.中间件.蓝图.session源码分析 一.请求扩展 1.before_request 2.after_requ ...
- python 并发编程 多进程 队列
队列介绍 进程彼此之间互相隔离,要实现进程间通信(IPC),multiprocessing模块支持两种形式:队列和管道,这两种方式都是使用消息传递的 创建队列的类(底层就是以管道和锁定的方式实现) 制 ...
- 2019JAVA第一次课程总结
课程总结:到现在为止之,学习专业课程已有两周了,从刚开始的啥也不懂,现在慢慢入门了.最开始我们为JAVA开发了运行环境,然后使用类编写了最简单的输出,然后开始学习了数据类型,这可以在编程中帮我们解决一 ...
- [Git] 015 远程仓库篇 第二话
0. 前言 在 [Git] 006 在本地新建一个仓库 中,我在本地建了一个仓库 "git_note" 这回的任务 在 GitHub 上建一个远程仓库:为方便记忆,我就起名为 &q ...