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">3</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 请求后端发送过来。
效果展示
怕有人说我,放个图镇镇楼!能行!
结尾
会在何处见到你 莫非前尘已注定