vue3+elementplus关于menu菜单箭头样式修改

最新推荐文章于 2024-11-26 17:44:17 发布

去远方的HelloKitty

最新推荐文章于 2024-11-26 17:44:17 发布

阅读量3k

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 前端 html vue elementui

本文链接：https://blog.csdn.net/fu2825666010/article/details/132127567

文章讲述了在ElementUI中如何修改默认的子菜单箭头样式，作者发现问题在于选择器的使用不正确，最终通过`:deep()`伪类解决了菜单关闭和展开时箭头旋转的问题，强调了深入理解CSS选择器的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element默认箭头是上下。在网上搜了好久发现虽然能改掉箭头的样式，但是子菜单的箭头样式也会修改。

如图，这是我们要求显示的结果，但是其实实际实现的时候子菜单的箭头样式并没有改变。网上搜到的代码大都是这样

//菜单关闭
.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); 
}

或者这样，

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

自己仔细研究了下，原来是选择器的问题，

改为，这样

.el-sub-menu :deep(.el-sub-menu__icon-arrow) {
    transform: rotate(-90deg) !important;
}

/*菜单展开箭头样式*/
.el-sub-menu.is-opened> :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
    transform: rotate(0deg) !important;
}

解决。

烦死了下，其实归根结底，还是自己研究的不透彻，没有好好去看，就是一个小箭头的问题。