elementui菜单导航-元素导航菜单图标使用自定义img图像

元素导航菜单图标使用自定义img图像

问题描述

使用元素导航菜单制作目录树，并使用自定义的img图像作为图标。 由于剪切的图像是 png 图像，因此没有使用字体图标或 svg。 图标的名称从前端返回，图片资源直接从assets中获取。 如果使用 来设置背景，需要一一设置对应的类，还有banckground等，需要写大量的css代码elementui菜单导航elementui菜单导航，而且如果hover样式和普通样式是两套图标，需要更多的CSS代码来实现它。 不太灵活

解决方案

  
    
    
     {{ item.menuName }}
  
  
    
      
      {{ item.menuName }}
    
    
  


export default {
  name: "SlideItem",
  data() {
    return {
      active: false,
      select: false,
      isBlur:false
    };
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: [String, Number],
    },
    activePath: {
        type:String,
        default:'/dataServer/resourceStatis'
    },
  },
  methods: {
    hasOnlyChild(item) {
      if (item.children.length <= 0) {
        return true;
      } else {
        return false;
      }
    },
    bingIcon(icon) {
      icon = icon || "sjfwgl";
      return require(`@/assets/menu/${icon}.png`);
    },
    bingActiveIcon(icon) {
      icon = icon || "sjfwgl";
      return require(`@/assets/menu/${icon}_hover.png`);
    },
    mouseenterActive() {
      this.active = true;
    },
    mouseleaveActive() {
      this.active = false;
    },
  }
};

版权属于作者。 转载或内容合作请联系作者。