菜单图标自定义怎么引入阿里的彩色图标呢，想要菜单那边引入彩色图标

Blade 未结

关注举报

 1  720

wuzhixin 剑童 2022-05-04 10:29

一、该问题的重现步骤是什么？

二、你期待的结果是什么？实际看到的又是什么？

三、你正在使用的是什么产品，什么版本？在什么操作系统上？

四、请提供详细的错误堆栈信息，这很重要。

五、若有更多详细信息，请在下面提供。

1条回答

yinyuncan - 小尹同学

2022-05-04 11:17

修改

sidebarItem.vue

 <template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
                    :index="item[pathKey]"
                    @click="open(item)"
                    :key="item[labelKey]"
                    :class="{'is-active':vaildActive(item)}">
        <svg v-if="item[iconKey].indexOf('#')===0" class="icon" aria-hidden="true">
          <use :xlink:href="item[iconKey]"></use>
        </svg>
        <i v-if="item[iconKey].indexOf('#')!==0" :class="item[iconKey]"></i>
        <span slot="title"
              :alt="item[pathKey]">{{generateTitle(item)}}</span>
      </el-menu-item>
      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
                  :index="item[pathKey]"
                  :key="item[labelKey]">
        <template slot="title">
          <svg v-if="item[iconKey].indexOf('#')===0" class="icon" aria-hidden="true">
            <use :xlink:href="item[iconKey]"></use>
          </svg>
          <i v-if="item[iconKey].indexOf('#')!==0" :class="item[iconKey]"></i>
          <span slot="title"
                :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
        </template>
        <template v-for="(child,cindex) in item[childrenKey]">
          <el-menu-item :index="child[pathKey],cindex"
                        @click="open(child)"
                        :class="{'is-active':vaildActive(child)}"
                        v-if="validatenull(child[childrenKey])"
                        :key="child[labelKey]">
            <svg v-if="child[iconKey].indexOf('#')===0" class="icon" aria-hidden="true">
              <use :xlink:href="child[iconKey]"></use>
            </svg>
            <i v-if="child[iconKey].indexOf('#')!==0" :class="child[iconKey]"></i>
            <span slot="title">{{generateTitle(child)}}</span>
          </el-menu-item>
          <sidebar-item v-else
                        :menu="[child]"
                        :key="cindex"
                        :props="props"
                        :screen="screen"
                        :collapse="collapse"></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

新增样式

 .icon {
  width: 1.6em;
  height: 1.6em;
  padding-right: 8px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

	<template>
	<div class="menu-wrapper">
	<template v-for="item in menu">
	<el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
	:index="item[pathKey]"
	@click="open(item)"
	:key="item[labelKey]"
	:class="{'is-active':vaildActive(item)}">
	<svg v-if="item[iconKey].indexOf('#')===0" class="icon" aria-hidden="true">
	<use :xlink:href="item[iconKey]"></use>
	</svg>
	<i v-if="item[iconKey].indexOf('#')!==0" :class="item[iconKey]"></i>
	<span slot="title"
	:alt="item[pathKey]">{{generateTitle(item)}}</span>
	</el-menu-item>
	<el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
	:index="item[pathKey]"
	:key="item[labelKey]">
	<template slot="title">
	<svg v-if="item[iconKey].indexOf('#')===0" class="icon" aria-hidden="true">
	<use :xlink:href="item[iconKey]"></use>
	</svg>
	<i v-if="item[iconKey].indexOf('#')!==0" :class="item[iconKey]"></i>
	<span slot="title"
	:class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
	</template>
	<template v-for="(child,cindex) in item[childrenKey]">
	<el-menu-item :index="child[pathKey],cindex"
	@click="open(child)"
	:class="{'is-active':vaildActive(child)}"
	v-if="validatenull(child[childrenKey])"
	:key="child[labelKey]">
	<svg v-if="child[iconKey].indexOf('#')===0" class="icon" aria-hidden="true">
	<use :xlink:href="child[iconKey]"></use>
	</svg>
	<i v-if="child[iconKey].indexOf('#')!==0" :class="child[iconKey]"></i>
	<span slot="title">{{generateTitle(child)}}</span>
	</el-menu-item>
	<sidebar-item v-else
	:menu="[child]"
	:key="cindex"
	:props="props"
	:screen="screen"
	:collapse="collapse"></sidebar-item>
	</template>
	</el-submenu>
	</template>
	</div>
	</template>

	`.icon {`
	width: 1.6em;
	height: 1.6em;
	padding-right: 8px;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
	}