element-ui饿了么框架中导航菜单中箭头方向问题

ゝ一纸荒年。 2021-09-18 14:26 1200阅读 0赞

原文：[https://blog.csdn.net/qq\_39692256/article/details/82227990][https_blog.csdn.net_qq_39692256_article_details_82227990]

### 这是饿了么默认导航样式（下、上） ###

![70][]

### 然而大部分使用场景、用户习惯是下边这种箭头方向（右、下） ###

![70 1][]![70 2][]![70 3][]

### element组件中没办法更改icon的值 ###

![70 4][]

### 采用覆盖element组件的css样式，或者直接更改依赖模块中的源码 ###

### 源码： ###

/*菜单打开*/ 
       .el-submenu .is-opened> .el-submenu__title .el-submenu__icon-arrow { 
       -webkit-transform: rotateZ(180deg); 
       transform: rotateZ(180deg); 
       }

### 更改后： ###

/*菜单关闭*/ 
       .el-submenu> .el-submenu__title .el-submenu__icon-arrow{ 
       -webkit-transform: rotateZ(-90deg); 
       -ms-transform: rotate(-90deg); 
       transform: rotateZ(-90deg); 
       } 
       /*菜单展开*/ 
       .el-submenu .is-opened> .el-submenu__title .el-submenu__icon-arrow{ 
       -webkit-transform: rotateZ(0deg); 
       -ms-transform: rotate(0deg); 
       transform: rotateZ(0deg); 
       }

### 最终效果： ###

![70 5][]

### 效果线上展示：[https://jsfiddle.net/47aq9kmf/2/][https_jsfiddle.net_47aq9kmf_2] ###

[https_blog.csdn.net_qq_39692256_article_details_82227990]: https://blog.csdn.net/qq_39692256/article/details/82227990
[70]: /images/20210812/33bd13364fa547feaa047821d51a63a0.png
[70 1]: https://img-blog.csdn.net/20180830182415954?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjkyMjU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180830182719677?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjkyMjU2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20210812/9eb0592e13a443bfacc49bf0ac223c7f.png
[70 4]: /images/20210812/31f305ac04a54ddfa164d6c696ac1c66.png
[70 5]: /images/20210812/3c65b4d514ff4601b64acfc60a03dc13.png
[https_jsfiddle.net_47aq9kmf_2]: https://jsfiddle.net/47aq9kmf/2/