el-select 内如何渲染彩色IconFont图标

导入

本想白嫖一个el-select 选择器内渲染彩色IconFont 图标的解决方案，然后在网上一顿搜索，找到过这样的：

还有这样的：

第二张图片原文链接

前者是官方提供的基本样式，但是也太丑了吧

后者是使用iconfont，但是这样引用我也试过，无法引入我心心念念的彩色图标，这方案也pass掉。

这咋办，无法偷懒了！！！

注：有使用过IconFont 的基础，直接跳转到5开始正题，前面都是在扯淡，当然，你想看看也没人拦着你！

Let’s go

先不说怎么在el-select内渲染，怎么在普通页面内渲染IconFont，不会还有小伙伴不知道吧

不会就好好学！会的话也建议扫一眼，别到时候弄不出来了bb我噢！

1、IconFont 引入方式

iconFont 的引入方式有三种，官网上也介绍的十分清楚，我就不复制粘贴了！iconfont引入方式，

咱总结一下：

• unicode方式：最原始的，兼容性最好，格式：<i class="iconfont">&#x33;</i>，缺点：单色。
• font-class 方式：unicode 稍微升级版，用类名来代替原来的字体编码，更直观。格式：<i class="iconfont icon-xxx"></i> ，缺点：还是单色。
• symbol 方式：支持多色图标。使用格式

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

单冲这支持多色图标，咱就选 symbol方式了（即使浏览器渲染它性能不行并且兼容性较差）！

2、开始导入

首先登录iconfont官网，选择几个图标，然后添加至个人项目中，然后选择symbol格式，下载至本地。

解压缩后，只复制一个文件iconfont.js，其余全部丢掉！

将iconfont.js文件复制到assets文件夹下，例如

然后在main.js 中引入该文件。

在App.vue给图标一个统一的样式，注意去掉 style 中 scoped

<style>
/**
为全局自定义导入的彩色iconfont设置属性
 */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 48px;
}
</style>

至此，图标的准备工作就到这里了，现在开始注册一个通用组件IconSvg.vue。

3、注册通用组件

对于图标来说，我们不想每次使用的时候，都要<svg>格式引入，而且这样的引入利用v-for来循环输出，因为<use>里面的参数无法接受变量。为了更舒服的使用，我们还是注册一个通用的注册吧。在componets组件下建立一个common文件夹，存放通用组件，取个名字：IconSvg

IconSvg.vue

<template>
    <svg :class="iconStyle" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script>
export default {
    name: "IconSvg",
    props: {
        iconClass: {
            type: String,
            default: ''
        },
        iconStyle: {
            type: String,
            default: ''
        }
    },
    computed: {
        iconName() {
            return `#${this.iconClass}`
        }
    }
}
</script>

<style scoped>

</style>

封装好之后，在其他组件中可放心引用，格式为

<IconSvg icon-style="icon" icon-class="icon-xxx" />

当然，引用前先原组件的script中引入该组件

属性解释：
icon-style:表明这是icon图标
icon-class: 后面的参数就是你导入的图标名称了，如下面的 icon-jieshou。

4、好像跑题了

说了这么多，其实都是在打基础了！要不然我直接上来就一个 v-for 走人，再放个图，你们不得骂死我hhh。

接下来转向正题。

5、el-select中渲染IconFont

直接放代码

	<el-form-item  label="类别图标名称" :label-width="formLabelWidth" prop="typeIcon">
		<el-select v-model="form.typeIcon"  placeholder="请选择图标" clearable>
			<el-option
                 v-for="(item, index) in MessageType"
                 :key="item.messageTypeId"
                 :label="item.typeIcon"
                 :value="item.typeIcon">
                 <template >
                     <IconSvg icon-style="icon" :icon-class="item.typeIcon" style="font-size: 24px; margin-right: 8px"/>
                     <span>{{item.typeIcon}}</span>
                 </template>
             </el-option>
         </el-select>
	</el-form-item>

<script>
import IconSvg from "../../common/IconSvg";
export default {
    name: "EditMessageType",
    components: {IconSvg},
    data () {
        return {
            form: {
                messageTypeId: '',
                typeName: '',
                description: '',
                typeIcon: '',
            },
            MessageType:[],
            formLabelWidth: '120px',
        }
    },
    mounted() {
        this.loadMessageType();
    },
    methods : {
        loadMessageType() {
            // 进入页面即开始渲染表格，从后台获取数据
            var _this = this
            this.$axios.get('/message/messageType').then(resp => {
                console.log(resp)
                if (resp && resp.data.code === 200) {
                    _this.MessageType = resp.data.result

                }
            })
        },
    }
}
</script>

解释：
MessageType： 这是一个对象数组，数据格式如下。初始化时，由 axios 请求后端发送过来。

效果展示

怕有人说我，放个图镇镇楼！能行！

结尾

会在何处见到你 莫非前尘已注定