el-select下的option可以展示图标,选中一项后,select输入框可以展示图标

255 阅读1分钟

1.  主要使用iconfont的unicode编码实现图标的显示。

2.  引入iconfont

登录iconfont, 选择合适的图标,加入购物车, 打开购物车, 将图标添加至项目,选择unicode格式,下载至本地。将下载的文件复制到项目代码中,一般放置在assets下。之后在main.js中引入文件css文件。

如果项目中有很多个iconfont文件,unicode方式的引入的话,可以修改类名及fontclass的值,避免与其他iconfont值混淆。

主要修改的是: iconfont.css文件与iconfont.json 文件。具体详见截图。

image.png

image.png

  1. 使用iconfont

使用的时候是unicode码,但是需要注意,不能直接使用#xe620; 需要将# 及‘ ; ’去掉。 在前边加' \ '。 el-option中显示图标,需要将el-option设置class为引入的iconfont的类名。这个时候,value 和label 设置为unicode 码,即可,显示图标。

选中图标后,el-input 中显示图标, 需要使用深度css, 修改el-select 的input的样式,修改字体样式为引入的字体样式,这样可以实现input 显示图标。