背景：

在收到的设计稿里看到这么一个内容：20个人形图标，通过图标数目展示男女比例。

当然，通过计算的方式，使用div一个一个的把图标循环显示出来也不是不可以。但我是一个懒人，如果是有组件可用，一定是利用组件来解决问题的。

思路

这时候看到element-ui里有一个近似的功能，rate评分，也可以自定icon，不必非要使用默认的星星图标。

地址见这里 其他icon https://element.eleme.cn/#/zh-CN/component/rate#qi-ta-icon

在简单读完后，点了一下图标的样式，发现了

.icon-rate-face-off:before{

content:"\e900"

}

说明这个图标需要通过iconfont 的方式来做

步骤

1.按照要求调整rate组件内图标的个数

2.找一个生成网站，把切好的图生成为iconfont

3.引入iconfont，并修改组件代码。

实现

1.按照要求调整rate组件内图标的个数

参数max修改为

 :max=“20”

2.生成为iconfont

可用阿里巴巴图标库创建自己的项目，接下来上传图片，下载整个项目的zip包。

如果懒得登录，使用这个库也行 icomoon https://icomoon.io/app/#/select/font

操作一样

3.引入

把包解压到文件夹，zip包内含字体文件ttf，css和html。

main.js引入css

import "@/assets/icomoon/style.css"

看一下demo.html里，名字是这么写的：

<span class="icon-uni-male"></span>

回到组件页，把class名字贴上去。

:icon-classes="['icon-uni-male','icon-uni-male','icon-uni-male']"

disabled-void-icon-class='icon-uni-female'

:low-threshold=‘8'

:high-threshold=“16"

组件部分完整代码

<el-rate disabled // 只读

v-model=“star”  // 绑定值。二者图标不一样，所以要把值计算为0-20的整数数字

:max=“20” //最大20

:icon-classes="['icon-uni-male','icon-uni-male','icon-uni-male']"

disabled-void-icon-class='icon-uni-female'

:low-threshold='8'

:high-threshold="16"

>

</el-rate>

效果图