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

导入
Let's go
- 1、IconFont 引入方式
- 2、开始导入
- 3、注册通用组件
- 4、好像跑题了
- 5、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-optionv-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 = thisthis.$axios.get('/message/messageType').then(resp => {console.log(resp)if (resp && resp.data.code === 200) {_this.MessageType = resp.data.result}})},}
}
</script>

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

效果展示

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

结尾

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

el-select 内如何渲染彩色IconFont图标相关推荐

vue项目引入彩色iconfont图标
做项目的时候经常会使用到iconfont图标库,在项目开始的时候提前想好需要什么图标,最好是多下载几个可替换的同类型图标,宁滥勿缺(别问,问就是得到了教训),无色的还是彩色的,这点很重要. 首先了解一 ...
iconfont 支持全新的彩色字体图标
大家好,我是若川.iconfont我相信大家都用过,而现在支持全新的彩色字体图标了.这是第二次转载,上一次的好文是2020 前端技术发展回顾. 点击下方卡片关注我.加个星标学习源码整体架构系列.年度总 ...
微信小程序中 iconfont 图标的使用（包括彩色图标）
阿里图标库的官网地址:iconfont-阿里巴巴矢量图标库 1.打开阿里巴巴矢量图标库,将自己需要的图标加入到购物车中: 2.在购物车里面将刚刚添加的图标加入到自己的项目,如果没有则按照提示创建一个项 ...
elemntui icon 大小_vue-elementui 引入第三方iconfont图标并使用彩色icon
使用element-ui中图标比较少,不够再项目中使用,我们引入阿里巴巴矢量图iconfont,并且使用彩色iconfont vue-element使用iconfont教程一.安装 npm inst ...
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
微信小程序.uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下 ...
ios label 高度紫石英_iOS中iconfont(图标字体)的基本使用
前言近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
项目新添加iconfont图标
在iconfont添加你想要的图标到购物车 2.下载至本地 3. 打开下好的文件夹里面找到iconfont.css和iconfont.js文件分别将以下标红内容复制到原有项目的iconfont. ...
iconfont图标_小程序使用 Iconfont 的正确姿势
前言现如今移动设备分辨率不胜枚举,传统的标量图标要分别导出 1 倍图.2 倍图.3 倍图等以适应高分辩率设备.这无疑大大增加了设计师和客户端开发的工作量.矢量图以其无损缩放的优点,在图标方面有着极大 ...
BUG记录--Iconfont图标在IE8浏览器的兼容问题
主要问题: Iconfont图标在IE8和以下版本的IE浏览器中无法正常正确渲染,在Firefox和Chrome中可以正常显示. 解决过程 : 首先验证css文件是否正常加载,在不同文档版本的ie浏览 ...

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

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

导入

Let’s go

1、IconFont 引入方式

2、开始导入

3、注册通用组件

4、好像跑题了

5、el-select中渲染IconFont

效果展示

结尾

el-select 内如何渲染彩色IconFont图标相关推荐

最新文章

热门文章