当前位置：首页 > article >正文

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

article 2025/1/13 10:32:46

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

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

2.找到我们的svg组件，样式设置为上面我们定义的currentColor即可啦

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

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

需要把我们未选中和选中的svg图片都放进来，如下：
找到我们侧边栏设置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;
    }
  }
}