element 菜单修复01-王荣荣如此唯美

最新推荐文章于 2024-05-09 10:10:46 发布
最新推荐文章于 2024-05-09 10:10:46 发布
阅读量200 收藏
点赞数
分类专栏： VUE2.x
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15009739/article/details/114331142
版权
本文介绍了在Element UI中遇到的菜单颜色显示问题，以及如何通过切换到使用Iconfont的symbol方式来解决。详细步骤包括查看设计结果、对比不同引入方式，并提供了相关代码仓库的修改记录链接。
摘要由CSDN通过智能技术生成

1， 

 

https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2115097&keyword=&project_type=&page=

一般都用iconfont 字体图标：

这玩意都是套路，没啥技术含量：

这个时候使用我出现了问题，就是iconfont 使用没有颜色问题，我给大家看下我的设计

结果如下：

所以这种方案不行啊？

 

所以我们改symbol 方式

链接如下： 

https://gitee.com/mzzy8/app/commit/e6c7c60a623dfa32e57a0a0faf5a5316a2e9fd0b

https://gitee.com/mzzy8/app/commit/7362cb761c3dfa4927aa77787ce05b35a40aa04b

https://gitee.com/mzzy8/app/commit/6d10d447c3073affb6f61c8076c5496790e6cbfa

行，以后字体图片我们都用svg ?

这一节我们学会了，将字体图标和 菜单ID 关联起来！

学会了，两种方式引入字体图标，这个可以下载下来，看人家的例子！

三种形式都有例子，可以参照着写！

https://gitee.com/mzzy8/app/commit/9d60acd8f6dfc0c38f788d10affe5a678accc04e

爱生活，爱编程
关注
专栏目录
修改element的菜单组件使其变为酷炫风格
nick_zhang的博客
11-10 1299
首先选给整个头部加背景图，其次munu中配置的background是对所有菜单都生效的，但我们不想改变父菜单，我们就把父菜单修改为transparent，最后为了让父菜单hover时产生平行四边形，利用伪元素配合 transform: skewX(-45deg)，并且因为父元素时透明的，所以加z-index:1让图形显示出来。
element二级菜单展示-王荣荣，如此可爱！
天天的博客
03-03 1005
<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> ...
element 菜单修复02-王荣荣如此唯美
天天的博客
03-03 184
这一节我们会学到排他思想，就是以前按钮的功能 比如有n 个按钮，点哪个哪个背景色发生变化， 2， 当我们下次再进来的时候，上次选中的按钮，要保持状态， 这类问题，在vue 中，仅仅需要一个状态标记结合localStorage 就搞定了！ https://gitee.com/mzzy8/app/commit/e8473aaa0b8379b778ec56f895ba68945cf8d18e 我们自己照着写下就行了 default-active 默认激活的是哪个选项，他会和下.
element 多层导航菜单，让网页设计更简洁、美观
希望看完文章的你能够带着答案离开
01-15 1万+
element 多层导航菜单，让网页设计更简洁、美观
Vue3 +Element-Plus Select 下拉菜单样式修改
蓝胖子的博客
05-09 1272
Vue3 +Element-Plus Select 下拉菜单样式修改
element 菜单修复03-王荣荣如此唯美
天天的博客
03-04 223
el-menu 折叠和展开功能实现： 这个功能很简单，当我们点击控制按钮的时候，控制 el-menu 的折叠和展开的状态维护， 还有一个就是 el-aside 侧边栏的宽度， 折叠的时候窄一些，不折叠宽一些，说白了，一个状态决定两个结构都发生变化 1， 加控制结构： 2，加处理函数： isExpand 肯定是响应式，这样才能视图状态发生变化！ isExpand 真为折叠，假为不折叠！ 4， 根据状态决定结构发生变化， 还有一个就是控制el-menu 行，左侧..
user 模块界面操作-王荣荣如此唯美
天天的博客
03-04 328
1， 面包屑导航： <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <..
斗罗-宁荣荣横屏手机壁纸高清无水印25张.rar
最新发布
07-20
踏入二次元的绮丽世界，宁荣荣以横屏高清无水印的25张手机壁纸，悄然降临于你的掌中天地，为你的屏幕增添一抹独特的光彩。【斗罗-宁荣荣横屏手机壁纸高清无水印25张.rar】，这不仅仅是一套壁纸的集合，它是一次视觉...
高一含氯消毒剂探究-尚荣荣.pptx
11-13
【知识点详解】 1. **含氯消毒剂的基本概念**： 含氯消毒剂主要指以次氯酸钠（NaClO）为主要成分的消毒剂，广泛用于家庭、医院、公共场所等的清洁消毒，能够有效地杀灭细菌和病毒。 2. **84消毒液的成分与作用**...
Vue3+Element-Plus 主页Aside(左侧)菜单美化 二六
build2024
12-08 1万+
1. 左侧菜单美化目的 2.如何更改选中的字体颜色 2.1 根据文档需求或UI配色需求，需要更改选中的字体颜色 1.找到最外层菜单项 el-menu ,该菜单项有一个属性active-text-color，它的意思是激活的文件颜色。只需要按照要求，把十六进制的颜色值填上即可。 1.1 取色器下载和使用方法 (45条消息) Vue3+Element-Plus 主页布局功能功能开发 二二_码侬人生-CSDN博客https://blog.csdn.net/weixin_39237340/arti..
Element UI样式修改之NavMenu导航菜单
qq_42750982的博客
03-25 1万+
Element UI样式修改之NavMenu导航菜单 一、成果展示 Element UI官网给出的例子如图一，我想要改变导航栏文字右边的三角图标成图二的样式： 图一 图二 二、步骤 1.首先将官网的例子复制到你的项目里面去，运行起来，鼠标右击选择检查： 2.打开Element UI图标的网页，然后右击选择检查，按照上图步骤就可以看到我们想要的图标的样式： 3.最后在<style></style>中添加以下代码即可达...
Element-UI修改默认的菜单样式
热门推荐
每天进步一点点
12-30 3万+
对于Element-UI这种前端框架，里面的自定义标签（例如el-menu，el-header等）基本上都是通过设置原生html标签的class属性来实现的，包括自定义标签的其他属性，最后大部分都转换成了class的值，所以修改样式时只需找到这些标签对应的类名称，然后按照结构用css语法做相应的处理。
Element导航菜单自定义样式
FANKYIXUN的博客
11-15 3万+
1.修改主菜单的背景色等，直接在<el-menu>标签上写所需背景色，比如： <el-aside width="205px" > <el-menu v-on:select="handleSelect" :default-active="$route.path" router background-color="rgb...
VUE：前端的框架简化DOM & Element ：美化页面
habe33的博客
07-13 2471
> * 能够使用VUE中常用指令和插值表达式 > * 能够使用VUE生命周期函数 mounted > * 能够进行简单的 Element 页面修改
Vue+Element UI导航菜单样式修改 submenu
ABCD198643的博客
06-06 1万+
1.右击检查，查看现在的样式，类名复制，粘在css中修改 2.el-submenu不能修改 重新写一个style样式 去掉scoped <style scoped lang="scss"></style> <style> .el-menu--horizontal>.el-submenu ....
vue 路由写法
天天的博客
03-28 4676
每一次学习，虽然学习的进度非常慢，但是要多做笔记，做多了，自然就掌握的多一点！ 有一个痕迹，回头复习的时候，你会很开心，因为是你自己写的，及时很烂，但是都没有任何关系，坚持就好！ 好，我们开始！ 1， 新建一个目录： 1， npm init -y 这个时候： 为啥用webpack 打包写，因为可以采用es6 的模块化写！ 2， npm i vue vue-ro...
vuex 多modules 下mapState的映射写法！
天天的博客
09-24 3968
这个在我以前的博客中写过，没有记住，这次复习下： https://blog.csdn.net/qq_15009739/article/details/108036519?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160091587719724835801557%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=
vue动态创建组件的方法解析
天天的博客
08-11 3045
createApi.js import Vue from "vue" // 我的理解，你给我一个组件，我将组件生成的dom 节点挂载到 body 上 // 就是这么简单的一个函数 function create(Component, props) { // 借助 Vue 来create real dom ，然后添加到body 中 let instance = new Vue({ render(h) { return h(Component,
vue-cli3 取消eslint 检查
天天的博客
05-16 2919
实际上在学习过程中，你会发现eslint 检查特别讨厌，这个时候我们需要关闭掉eslint 检查
宁荣荣25张高清无水印横屏手机壁纸赏析
资源摘要信息:"斗罗-宁荣荣横屏手机壁纸高清无水印25张" 1. 二次元文化介绍：该资源集合是一次视觉与情感的盛宴，代表了二次元文化中的角色壁纸风潮。二次元通常指动画、漫画、游戏等虚拟世界的总称，它的爱好者被...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值