使用Element-UI的NavMenu如何隐藏自带的小箭头

大美女

Element-UI的NavMenu隐藏自带的小箭头

这里使用的是水平菜单，用icon作为title

直接套用官网的模版会在icon的右边有一个小箭头，但现在需要隐藏它
直接使用下面的css代码即可

1. .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
   
2.         display: none;
   
3. }
   
4. 
   
5. .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
   
6.         display: none;
   
7. }

复制代码

注意：
在

1. <style>

复制代码

标签里需要把scope删掉

更改element ui中下拉菜单的小箭头的样式


添加样式

【注意添加样式style中不能添加scoped】

1. .drop.el-popper[x-placement^=bottom] .popper__arrow {
   
2.                 border-bottom-color: #1EBEF4 !important;
   
3.                 left: 50% !important;
   
4.         }

复制代码

更改下方箭头位置

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/323528e3w.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！