<el-menu>菜单标签(里面可以包括:<el-submenu>和<el-menu-item>)

只谈情不闲聊 提交于 2019-12-05 11:07:19

<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>

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
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!