<el-menu>菜单标签(里面可以包括:<el-submenu>和<el-menu-item>)
2024-09-05 21:26:30
<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 |
最新文章
- 第三章 --- 关于Javascript 设计模式 之 代理模式
- TCP学习之五:客户端、服务端异步传输字符串
- python 数据处理学习pandas之DataFrame
- elk系列8之logstash+redis+es的架构来收集apache的日志
- BackgroundWorker组件的作用
- netty发送utf-8编码的信息
- 一次zabbix的渗透
- ASP.NET MVC3 使用kindeditor编辑器获取不到值
- javascript笔记——图片大小检测
- 我摘录的js代码
- 【宽搜】Vijos P1206 CoVH之再破难关
- C语言指针和数组知识总结(下)
- COGS 1299. bplusa【听说比a+b还要水的大水题???】
- 电脑小白和ta的小白电脑——PowerDesigner的安装与破解
- mac date命令详解
- Fabric实例
- JSTL中forEach标签应用示例【转】【补】
- lower_case_table_names
- 初学者必读:IBM长文解读人工智能、机器学习和认知计算
- 并查集(Union-Find) 应用举例 --- 基础篇