vue2+element侧边栏menu图片自定义设置

一般呢我们的图片只会设置一张，但是特殊情况下需要要我们实现选中前后是两张不同的图片，类如这样👇：
以前我都直接驳回需求这个不合理的要求，但是我觉得这也不是事，万一后面客户就是想要这个效果呢，所以呢我就小小研究了下，废话不多说上代码咯

一、适合选中前后图标一样，只是颜色不一样的

1. 修改图标的颜色，我们的图片应该都是svg格式，此时，我们找到我们的svg图片对应的代码在path后面加入fill="currentColor"，如下👇：（svg我是从蓝湖下载的，阿里巴巴下载的应该可以直接写color就能修改的！）
   
   2.找到我们的svg组件，样式设置为上面我们定义的currentColor即可啦
   

优点：我们svg图标是需要放入未选中的一种，节省了内存
缺点：我们下载svg都需要自己加下fill=“currentColor”，如果图标很多就会很费时间

二、适合选中前后展示不同图标

1. 需要把我们未选中和选中的svg图片都放进来，如下：
   
2. 找到我们侧边栏设置ICON的地方，一般在\项目\src\layout\components\Sidebar\Item.vue，两个图标都放入，通过样式来决定展示哪个

if (icon) {
  if (icon.includes('el-icon')) {
    vnodes.push(<i class={[icon, 'sub-el-icon']} />)
  } else {
    const svgIcon = icon + '-active'
    vnodes.push([
      <svg-icon icon-class={svgIcon} className='side-icon side-icon-active' />,
      <svg-icon icon-class={icon} className='side-icon side-icon-un' />
    ])
  }
}

3.在\项目\src\styles\sidebar.scss，在这里搜下el-submenu__titleclass，加入切换样式：

.el-submenu__title {
 color: $menuColor!important;
  background-color: $menuBg!important;
  .side-icon-active{
    display: none;
  }
  .side-icon-un{
    display: inline-block;
  }
  &.is-active{
    background-color: $menuHover !important;
    color: $menuHoverColor!important;
    .side-icon-active{
      display: inline-block;
    }
    .side-icon-un{
      display: none;
    }
  }
}

优点：更灵活，方便选中后配置不一样的ICON
缺点：更占内存

这两种实现方式，各有利弊，大家自行选择哈，不说了，继续当牛马了🙁

原文地址：https://blog.csdn.net/qq_43384836/article/details/145073827

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！