element 导航菜单 图标使用自定义img图片

问题描述

使用element导航菜单做目录树，图标使用自定义的img图片，由于切图给的是png图片，没有使用字体图标或者svg，从后端返回图标的名称，直接从assets中获取图片资源，如果使用background去设置背景，那就需要一个一个去设置相应的class，以及banckground等，需要写很多的css代码，而且hover样式和普通样式如果是两套图标，就需要更多的css代码去实现，不太灵活

解决办法

• 使用img加载图片，使用require('@/assets/menu/${xxx}.png');
• hover时加载另一套图标，原本使用@click，@foucs，@blur结合可以实现，但是当鼠标焦点移出菜单区域，选中样式取消，最终通过$route.path 实现，代码如下

<template>
  <el-menu-item
    v-if="hasOnlyChild(item)"
    :index="item.path"
    @mouseenter.native="mouseenterActive"
    @mouseleave.native="mouseleaveActive"
  >
    <img class="mr-10" :src="bingActiveIcon(item.icon)"  v-if="active || $route.path == item.path"  />
    <img class="mr-10" :src="bingIcon(item.icon)" alt="" srcset="" v-else />
    <span class="asider_span_text"> {{ item.menuName }}</span>
  </el-menu-item>
  <el-submenu v-else :index="item.path">
    <template slot="title">
      <img class="mr-10" :src="bingIcon(item.icon)" alt="" srcset="" />
      <span class="asider_span_text">{{ item.menuName }}</span>
    </template>
    <slide-item
      v-for="(child, index1) in item.children"
      :item="child"
      :index="index + '' + index1"
      :key="index1"
    ></slide-item>
  </el-submenu>
</template>

<script>
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;
    },
  }
};
</script>

<style>
</style>