<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

  1. <el-menu :router="true" mode="horizontal" background-color="#1c213f" text-color="#fff">
  2. <el-submenu index="1">
  3. <template slot="title">
  4. <i class="el-icon-menu"></i>
  5. </template>
  6. <el-menu-item index="1-1">选项一</el-menu-item>
  7. <el-submenu index="2">
  8. <template slot="title">选项二</template>
  9. <el-menu-item index="2-1">选项二-一</el-menu-item>
  10. </el-submenu>
  11. </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>)的更多相关文章

  1. Tkinter 之Menu菜单标签

    一.参数说明 语法 作用 MenuBar = tk.Menu(window) 创建一个菜单栏 fileBar = tk.Menu(MenuBar, tearoff=0) 创建一个菜单项,不分窗. Me ...

  2. Cocos2d—X游戏开发之CCToggle(菜单标签切换)CCControlSwitch(开关切换)

    Cocos2d—X游戏开发之CCToggle(菜单标签切换) 首先继承子CCMenu,是菜单标签中的一种.‘ class CC_DLL CCMenuItemToggle : public CCMenu ...

  3. Android添加Menu菜单

    在安卓中添加Menu菜单十分简单. 步骤: 1.在menu文件夹中的main.xml文件中添加要添加的项目. <menu xmlns:android="http://schemas.a ...

  4. Android4.0 -- UI控件之 Menu 菜单的的使用(一)

      这一讲开始我们来讲一下Android中菜单的使用方法,菜单是应用中的普通的组件,主要是提供友好和专注的用户体验,你可以在你的Activity中使用 Menu APIs 来提供用户动作和其他选项的操 ...

  5. [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  6. ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    本篇讲解菜单.绘图.还有大小变更控件.菜单控件可以附加到各种其他控件中,比如按钮.工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单):ext对绘图的支持可以让我们通过js来绘图:大小变更控件可以让 ...

  7. Android开发中的menu菜单

    复写onCreateOptionsMenu方法,当点击menu菜单时,调用该方法. @Override public boolean onCreateOptionsMenu(Menu menu) { ...

  8. SharePoint 2013 激活标题字段外的Menu菜单

    前言 SharePoint 有个很特别的字段,就是标题(Title)字段,无论想要链接到项目,还是弹出操作项目的菜单,都是通过标题字段,一直以来需要的时候,都是通过将标题字段改名进行的. 其实,Sha ...

  9. Ecshop 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

  10. 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

随机推荐

  1. java kryo序列化与反序列化

    https://blog.csdn.net/lan12334321234/article/details/84907492 问题: https://blog.csdn.net/baidu_384041 ...

  2. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  3. C#简单工厂模式和单列设计模式潜要解析

    简单工厂设计模式,又叫做静态工厂方法(Static Factory Method)模式,就是由一个工厂类根据传入的参量决定创建出哪一种产品类的实例. 简单工厂模式是工厂模式家族中最简单实用的模式.简单 ...

  4. 递归算法输出数列的前N个数

    数列1,1,1,3,5,9,17,31,57,105……N大于3时,第N个数为前三个数之和. ; i < ; i++) { listint.Add(); } test3(); test3(); ...

  5. Linux几个命令的升级替代品

    grep => ack, agack和ag是两个文本搜索工具,比自带的grep要好用得多.在指定目录下搜索文本时,它们不需要像grep那样指定各种命令行选项,输出结果也会包含文件名和行号,并且会 ...

  6. eclipse和myeclipse怎么在项目中查找指定代码?https://www.jb51.net/softjc/554889.html

    有的童鞋,想eclipse和myeclipse整个项目中查找指定代码,由于补经常使用,可能会补熟悉.如果要去掉项目中所有的某个代码的话,找不到是灰常麻烦的,下面就简单说下怎么查找,希望对需要的人有用. ...

  7. wsl 下安装docker

    docker for windows本身其实是可以直接用的,但是仍然有很多不足,比如说:权限问题.没有docker.sock文件.文件编码问题等.而win10自带的wsl可以非常完美地解决这些问题. ...

  8. java日常统计

    姓名:Danny         日期:2017/11/27 任务 日期 听课 编程程序 阅读课本 准备考试 日统计 周一 30 120 150 周二 50 140 190 周三 周四 周五 周六 周 ...

  9. 机器学习实战-K-近邻算法(kNN)

    k-近邻算法(kNN)---它的工作原理是:存在一个样本数据集合,也称做训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每个数据与所属分类的对应关系.输入没有标签的新数据后,将新数据的每 ...

  10. “AIIA”杯-国家电网-电力专业领域词汇挖掘

    十一之前一直在做“电力领域的词典构建”任务,今天也去聆听了前五支队伍的报告,现结合这段时间来的项目经历,写一下自己的若干心得. 电力领域的词典构建——方法1(非监督学习) 在电力领域词典构建心得1.0 ...