Element+Vue+SVG给下拉框选项添加图标

简单记录一下

代码

SvgIcon.vue 组件用来简单封装svg

<template>
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
</style>

全局注册svg

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// 引入svg组件

// 全局注册
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

下拉框页面代码：

<template>
	<el-select v-model="icon" filterable>
		<el-option label="无" value="" />
			<el-option v-for="(item, index) in iconList" :key="index" :value="item.value" :label="item.label">
			<span style="float: left;">{{ item.label }}</span>
			<svg-icon style="float: right;" :icon-class="item.value" />
		</el-option>
	</el-select>
</template>

export default {
	data() {
	    return {
		    icon: null,
			iconList: [
				{ label: '场景', value: '场景' },
				{ label: '地图', value: '地图' },
				{ label: '灯杆', value: '灯杆' },
				{ label: '电脑', value: '电脑' },
				{ label: '发布', value: '发布' },
				{ label: '告警', value: '告警' },
				{ label: '广播', value: '广播' },
				{ label: '检测', value: '检测' }
			]
		}
	}
}

最终截图

: