Vue3+Element-Plus 主页Aside(左侧)菜单美化 二六
1. 左侧菜单美化目的2.如何更改选中的字体颜色2.1 根据文档需求或UI配色需求,需要更改选中的字体颜色1.找到最外层菜单项 el-menu ,该菜单项有一个属性active-text-color,它的意思是激活的文件颜色。只需要按照要求,把十六进制的颜色值填上即可。1.1 取色器下载和使用方法(45条消息) Vue3+Element-Plus 主页布局功能功能开发 二二_码侬人生-CSDN博客
文章共2,926字 · 阅读需要大约10分钟
一键AI生成摘要,助你高效阅读
问答
·
一. 左侧菜单美化目的
二.如何更改选中的字体颜色
2.1 根据文档需求或UI配色需求,需要更改选中的字体颜色
1.找到最外层菜单项 el-menu ,该菜单项有一个属性 active-text-color,它的意思是激活的文本颜色。只需要按照要求,把十六进制的颜色值填上即可。
1.1 取色器下载和使用方法
2. 如图,比如我们需要选中文本时变成蓝色
2.1 在el-menu 菜单项的 active-text-color 属性上改更
2.2 页面效果
三. 如何动态为左侧菜单项添加不同图标
3.1 可以直接使用官网的图标库
2. 使用官网图标库时,不显示图标解决方法
(46条消息) Vue3+Element-Plus 主页Aside布局设计 二四_码侬人生-CSDN博客https://blog.csdn.net/weixin_39237340/article/details/121708367
3.2 如果官网的图标库没有想我们想要的图标怎么办
1. 使用可以阿里巴巴图标库 (第三方图标库)阿里巴巴矢量图标库https://www.iconfont.cn/
2. 如何将阿里巴巴图标库引入项目中使用
3.3 动态为各菜单项渲染不同的图标
1. 使用到的图标,该图标参考上面教程下载,放入项目静态文件夹即可
2. 渲染图标思路
2.1 首先我们知道,我们在渲染左侧菜单数据的时候,每一个图标都是经过循环渲染出来的。
2.2 那如何在左侧菜单渲染期间,给每一项菜单文本修改不同的图标呢?
- 在data中定义一个图标字体的对象
- 然后在图标字体对象中定义键值对,下一步需要考滤的是,什么做为键 (key),什么做为值 (value)
- 这个键(key) 应当是唯一的值,也就是每一项菜单的id。值(value) 就是要为不同的菜单项文本设置显示的字体图标了。
2.3 图标字体代码实现
data () {
return {
// 左侧菜单数据对象
menulist: [],
// 字体图标对象
iconsObj: {
125: 'iconfont icon-users',
103: 'iconfont icon-tijikongjian',
101: 'iconfont icon-shangpin',
102: 'iconfont icon-danju',
145: 'iconfont icon-baobiao'
}
}
}
2.4 修改菜单固定图标代码,根据各菜单项的值,找到字体图标对象中定义的key-value 对,动态循环展示各个值对应的value (图标)
2.5 更改后的效果。但是图标和字体之间靠的太近了,那该如何添加间距呢?
四.如何让图标和文字之间保持间距
4.1 由于每个图标项,都有一个icon 类
4.2 添加一个icon 类选择器
4.3 最后效果
五. 如何实现当点击左侧菜单某一项时,自动关闭已展开的其他菜单项,只保留打开当前点击的菜单项。
5.1 实现思路,根据官网unique-opened属性进行设置,默认值是False,如果想只保持展开一个,把当前的属性改成true 即可。
5.2 那么这个属性应该加到那里去呢?就需要看这个属性是属于谁。
5.3 代码实现
- 注意事项
- 需要在该属性unique-opened 前面添加一个冒号,添加冒号,代表的属性绑定。
- 如果不添加冒号,则里面的值只是代表一个字符串,这样是不生效的
- 也可以直接简写成 unique-opened
5.4 效果
5.5 如上图,当选择一级菜单时,子菜单项右侧边有点对不齐的现象
1. 引起的原因,在el-menu 中有一个 border-right 边框值为1 px
如图所示
2. 如何解决
2.1 只需要把 el-menu 菜单项的 border-right 重置为0 或 none,即可解决
5.6 解决后的效果 ,随便展开子项,就看不到右侧对不齐的效果了
六 Home.vue最终代码
<template>
<el-container class="home_container">
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/heima.png" alt="" />
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 页面主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<el-menu active-text-color="#409Eff"
background-color="#545c64"
text-color="#fff" unique-opened>
<!-- 一级菜单 -->
<el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单模板区域 -->
<template #title>
<el-icon :class="iconsObj[item.id]"></el-icon>
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
<template #title>
<el-icon><iconMenu /></el-icon>
<span>{{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧内容主体区域 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data () {
return {
// 左侧菜单数据对象
menulist: [],
// 字体图标对象
iconsObj: {
125: 'iconfont icon-users',
103: 'iconfont icon-tijikongjian',
101: 'iconfont icon-shangpin',
102: 'iconfont icon-danju',
145: 'iconfont icon-baobiao'
}
}
},
created () {
this.getMenuList()
},
methods: {
logout () {
window.sessionStorage.clear()
this.$router.push('/login')
},
// 获取所有的菜单数据
async getMenuList () {
const { data: res } = await this.$http.get('menus')
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
// 成功了,进行赋值
this.menulist = res.data
console.log(res)
}
}
}
</script>
<style lang="less" scoped>
.home_container {
height: 100%;
}
.el-header {
background-color: #363d40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
// 清空图片左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// 文本颜色
color: #fff;
// 设置文本字体大小
font-size: 20px;
// 嵌套
> div {
// 弹性布局
display: flex;
// 纵向上居中对齐
align-items: center;
// 给文本和图片添加间距,使用类选择器
span {
margin-left: 15px;
}
}
}
.el-aside {
background-color: #313743;
.el-menu {
border-right: none;
}
}
.el-main {
background-color: #e9edf1;
}
.iconfont{
margin-right: 10px;
}
</style>
以上出自:
更多推荐
已为社区贡献8条内容
所有评论(0)