修改NavMenu导航菜单的展开按钮（修改Element样式的思路）
前⾔
最近产品经理觉得导航菜单的展开按钮 ，如下不好看，要改成实体的
导航页源码默认样式
需要样式
实现
⾸先想到的是翻⼀下⽂档，看看⽂档⾥有没有提供。结果没有只好⾃⼰想办法了，查看源码可以看出这个图标是⼀个样式
解决⽅式就是替换掉这个类，怎样替换是个问题，最开始的想法是加个ref，在mounted⾥获取到ref，修改掉样式。结果失败了，并且有点复杂。
⼜想了想突然发现可以⽤指令啊，换成指令突然发现好⽅便啊。具体实现如下：
<el-submenu v-bottom :index="del":key="val.id" v-if="val.children.length > 0">
directives:{
bottom:{
bind(el){
let icon = el.getElementsByClassName('el-submenu__icon-arrow el-icon-arrow-down')[0];
icon.className ='el-submenu__icon-arrow el-icon-caret-bottom';
icon.style.fontSize ='15px';
}
}
}
效果
总结
突然发现以前⽤ref来获取元素修改样式是真复杂，完全可以通过指令的⽅式进⾏实现，⽽且通过指令⽅式还可以实现复⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。