修改a-menu菜单图标icon

最新推荐文章于 2025-03-17 16:55:23 发布

i_am_a_div_日积月累_

最新推荐文章于 2025-03-17 16:55:23 发布

阅读量647

点赞数 3

分类专栏： ant design vue爬坑日记 element-ui 文章标签：修改a-menu菜单图标icon

本文链接：https://blog.csdn.net/i_am_a_div/article/details/139831330

版权

element-ui 同时被 2 个专栏收录

68 篇文章

订阅专栏

ant design vue爬坑日记

20 篇文章

订阅专栏

1.通过触摸元素可知

这个箭头icon其实是通过::before和::after伪元素组合写出来的

2.模仿使用伪元素书写

同理，我们也使用伪元素写icon即可

  ::v-deep .ant-menu{
  
    // 折叠
    .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after{
      width: 10px;
      height: 1.5px;
      background-color: #8a8a8a!important;
      background-image:none;
      transform: rotate(0deg) translateX(0px);
    }
    .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before{
      width: 10px;
      height: 1.5px;
      background-color: #8a8a8a!important;
      background-image:none;
      transform: rotate(90deg) translateY(0px);
    }
    // 展开
    .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after{
      width: 10px;
      height: 1.5px;
      background-color: #8a8a8a!important;
      background-image:none;
      transform: rotate(0deg) translateY(0px);
    }
    .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before{
      display: none;
    }

  }