元素 水平导航 更多 为什么省略元素导航菜单
最编程
2024-03-14 16:36:31
...
element-ui_NavMenu-典型导航菜单
目录
文章目录
- 1、效果展示
- 2、element-ui 导航菜单组件
- 2.1、el-menu 菜单
- 2.2、el-submenu 子菜单
- 2.3、el-menu-item 菜单项
- 3、实现
- ***后记*** ：
内容
1、效果展示
通过点击三根白色竖线对应的区域，实现导航菜单的展开和折叠
- 展开示例效果0-1：
- 折叠示例效果0-2：
2、element-ui 导航菜单组件
- 通用插槽
<template slot="title">
<i class="el-icon-user-solid"></i>
<span>会员管理</span>
</template>- i标签：图标，class指定图标名称，具体参考官网
- 位置：放置在span标签前，图标出现在文字前；放置在span标签后，出现在文字后
- span标签内文字：显示在菜单项中的文字
2.1、el-menu 菜单
- 常用属性详解
属性名 |
类型 |
可接受值 |
默认 |
描述 |
background-color |
string |
- |
#ffffff白色 |
背景色 |
text-color |
string |
- |
#303133 |
文本颜色 |
default-active |
string |
- |
- |
默认激活的菜单项，一般设置为子菜单 |
active-text-color |
string |
- |
#409EFF |
激活的菜单项字体颜色 |
unique-opened |
boolean |
true/false |
false |
是否只展开一个菜单及其子菜单项，即不同时展开多个菜单项（一级菜单） |
collapse |
boolean |
true/false |
false |
是否折叠 |
collapse-transition |
boolean |
true/false |
false |
是否显示折叠动画 |
router |
boolean |
true/false |
false |
是否激活vue-router模式 |
2.2、el-submenu 子菜单
属性名 |
类型 |
可接受值 |
默认 |
描述 |
index |
string |
- |
- |
菜单项唯一标志，配合router属性使用 |
2.3、el-menu-item 菜单项
属性名 |
类型 |
可接受值 |
默认 |
描述 |
index |
string |
- |
- |
菜单项唯一标志，配合router属性使用 |
3、实现
- template代码：
<div class="btn-toggle" @click="toggleCollapse">|||</div>
<el-menu
background-color="#333744"
text-color="#fff"
default-active="/report"
active-text-color="#ffd04b"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
router
>
<el-submenu index="/index">
<template slot="title">
<i class="el-icon-s-home"></i>
<span>首页</span>
</template>
<el-menu-item index="/report">
<template slot="title">
<i class="el-icon-menu"></i>
<span>报表</span>
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-s-grid"></i>
<span>商品管理</span>
</template>
<el-menu-item index="/category">
<template slot="title">
<i class="el-icon-menu"></i>
<span>分类管理</span>
</template>
</el-menu-item>
<el-menu-item index="/brand">
<template slot="title">
<i class="el-icon-menu"></i>
<span>品牌管理</span>
</template>
</el-menu-item>
<el-menu-item index="/goodsList">
<template slot="title">
<i class="el-icon-menu"></i>
<span>商品列表</span>
</template>
</el-menu-item>
<el-menu-item index="/specification">
<template slot="title">
<i class="el-icon-menu"></i>
<span>规格参数</span>
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="/user">
<template slot="title">
<i class="el-icon-user-solid"></i>
<span>会员管理</span>
</template>
<el-menu-item index="/userList">
<template slot="title">
<i class="el-icon-menu"></i>
<span>会员管理</span>
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="/sale">
<template slot="title">
<i class="el-icon-money"></i>
<span>销售管理</span>
</template>
<el-menu-item index="/order">
<template slot="title">
<i class="el-icon-menu"></i>
<span>订单管理</span>
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="/authority">
<template slot="title">
<i class="el-icon-s-tools"></i>
<span>权限管理</span>
</template>
<el-menu-item index="/role">
<template slot="title">
<i class="el-icon-menu"></i>
<span>角色管理</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>- script代码
...
data() {
return {
isCollapse: false
}
}
...
methods: {
...
toggleCollapse() {
this.isCollapse = !this.isCollapse
}
...
}提示 ：首页完整代码在博文’全栈项目-乐优商场-主页布局’中，后续菜单项会从数据库获取，实现菜单项的动态更新。