首页 > 其他分享> 文章详细

下拉菜单el-menu

2019-06-27 14:43:43 阅读：200 来源： 互联网

标签：el 菜单 string color menu text router 下拉菜单

<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,菜单,string,color,menu,text,router,下拉菜单
来源： https://www.cnblogs.com/gaofz/p/11096831.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

下拉菜单el-menu