Element UI样式修改之NavMenu导航菜单箭头样式修改

UI设计稿给的菜单箭头样式可能与我们饿了么组件NavMenu的菜单箭头样式不一致,目前我们侧边导航菜单的上下翻转箭头如下所示:
Element UI样式修改之NavMenu导航菜单箭头样式修改_第1张图片
希望得到如下的结果:
Element UI样式修改之NavMenu导航菜单箭头样式修改_第2张图片
找到饿了么Icon里我们想要向下箭头,F12后复制content内容content: “\e790”;

content: "\e790";

Element UI样式修改之NavMenu导航菜单箭头样式修改_第3张图片
然后将默认的content: “\E6DF”;替换成content: “\e790”;就好了,在vscode里搜索替换即可
Element UI样式修改之NavMenu导航菜单箭头样式修改_第4张图片
最后在侧边栏菜单组件里的style中,添加以下穿透样式代码,即可达到我们想要的效果:

你可能感兴趣的:(JS实战记录,vue2,前端,vue.js)