iconfont半月坑
不吐不舒服
正题之前,先吐槽一波阿里矢量图库:
- 批量上传。慢,且容易丢包。应该跟其异步上传有关,传300个,只能回显几十个,点击保存之后,再次点击上传按钮,还不等你上传,它会戏剧性的自己回显一波,直接点保存,往复几遍,最终传上来的也不够数,也不知道哪些传了,哪些丢了,也不知道后面还会不会自己再传上来。即想它来,又怕它胡来~~~~
- 批量私有。全部选中后,点击批量私有,发现只私有了一部分,有时是当前页的一部分,有时连下一页都带着私有了一部分,反正要实现全部私有,得反反复复好几拨。
- 全选。全选后,点击批量操作(删除、私有都行),完事儿后全选状态不会消失,想再进行下一波全选操作,得先手动吧全选取消掉,再选上。
有事说事
iconfont可以说是火了很多年的技术了。其原理就是基于css hack、css 伪类等,通过字体文件来渲染具备矢量图特性的字体图标。很多人以为iconfont是阿里的技术,其实不然,阿里只是在国内为我们提供了一个开源的矢量图库,这个图库的意义就是可以帮助我们把一些svg图标,转换成iconfont资源,并且大家可以相互开源共享这些图标资源。类似这种平台国外也有很多,比较有热度的iconmoon、fontawesome等。相比他们阿里的平台在国内更具地缘优势,并且每年的那几段非常时期它也不会被墙,加上自身强大的品牌效应,自然成了国内的独角兽,给自己平台取了名叫iconfont,大家自然而然的以为iconfont就是阿里开源的技术了~~~~一本正经,胡说八道~~~~
燎坑
1号坑
如何将拼接有自定义组件的字符串渲染到页面中,看上去有点绕,上代码
<div v-for="item in 10">{{getStr(item)}}
</div>或者<div v-for="item in 10"><span v-html="getStr(item)"/>
</div>
getStr(n){return `<iconfont name='icon-vm${n}'/><span>第${n}条</span>`
}
觉得上述代码会生效吗?
必然不会,因为返回的字符串里的iconfont组件根本就没有参与编译。即是下面的v-html,也仅仅是解析原生的html标签,对iconfont组件依然无法着手。
怎么解决?(我开始怀念angular的$compile()了....)
自定义个临时的局部组件,然后把此字符串传给该组件的template。最初我也这么想的,但又觉得这么写有点重,毕竟是个遍历,每次都定义个组件,怪怪的~~
幸得团队内的佛爷指点(感谢),一种轻巧的写法,虽然本质意义上也是定义了临时组件,但主观感觉上还是挺好的。
<div v-for="item in 10"><component :is="{template:'<span>'+getStr(item)+'</span>'}"/>
</div>
2号坑
当iconfont在超链接中,鼠标悬浮在超链接上时,如何在保留其他内容下划线的前提下,去掉iconfont的下划线 ?上代码:
// 当鼠标悬浮时,“虚拟机”下有下划线,iconfont下不准出现下划线
<a href="#"><iconfont name="icon-vm"/>虚拟机</a>
有的老师可能会说 text-decoration: none;
那你可以试试~~~ 百度一下,也有好多人在寻答案,然,没有答案。
再得佛爷指点(感谢),简单到雷人
<a href="#"><iconfont name="icon-vm" style="display:inline-block"/>虚拟机</a>
搞定!有时真让人不得不感叹!
就这些吧,都是很简单的问题,不遇到可能永远不会去思考如何去解决。一直觉得iconfont很简单且经过这么长时间的沉淀已经很稳定,这次软磨硬泡了半个月,也踩了不少坑,还有很多东西要学,技术路,不好走!
iconfont半月坑相关推荐
- 踩坑 微信小程序开发mpvue使用iconfont,顺便解决偶现图标显示不正确
刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小 都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...
- uni-app(踩坑第二篇):iconfont使用font-size失效(已解决)
1.阿里矢量图标库使用 地址:iconfont-阿里巴巴矢量图标sou 使用:uni-app 使用 iconfont_荔枝1的博客-CSDN博客_iconfont uni-app 参考这位博主 当中自 ...
- Docker 存储选型,这些年我们遇到的坑
戳蓝字"CSDN云计算"关注我们哦! 技术头条:干货.简洁.多维全面.更多云计算精华知识尽在眼前,get要点.solve难题,统统不在话下! 随着Docker 容器技术的不断发展和 ...
- iconfont 图标转为字体_App 中使用 Iconfont 的整套方案
作者:集美貌与才华于一身的 小芳 什么是Iconfont 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和我们使用自定义字体的方式是一样的,并且它是一种矢量图 ...
- 微信小程序开发踩坑经验——小蜗社群
2019独角兽企业重金招聘Python工程师标准>>> 之前遇到并且解决的坑,这边也渐渐忘记了,在这里就不列出来了-- 1.wx.redirectTo和wx.navigateTo ...
- 如何在openlayers中使用iconfont或font Awesome字体图标
目录 前言 1.准备工作 2.新建一个最简单的helloworld页面 3.看看效果 4.注意点1-需使用Unicode写法 4.注意点2-需注意iconfott.woff2的请求顺序 5.特殊图标的 ...
- uniapp引用iconfont图标
不得不说uniapp引入iconfont确实比较坑.下面方法可行: 引入方法: 1.在confont官网找好图标,然后点击复制代码, 2.点击红圈的复制代码后在网页打开,出现如下: 3.然后再unia ...
- 这算通过审核了么?接下来还有没有什么坑,求大神指点!--酷课堂iOS交流群问答精华整理(201808期)
酷课堂iOS交流群 我们是一个什么样的组织: 酷课堂iOS交流群,聚集了一群热爱技术.有趣.有料,平均Q龄在10年以上的"老司机",他们遍布在全国/球各地,有知名企业iOS工程师. ...
- uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历 首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图 点击右上角的购物车 添加到项目 这里有坑 首先你不选中在线链接 你是看不到 @font-f ...
最新文章
- Linux大神必会操作——系统排错
- DockOne微信分享(一一二):Flannel中vxlan backend的原理和实现
- 开发日记-20190328 关键词 利用eolinker一键快速生成API接口文档
- 12 - 函数式编程
- java 二维数组作为参数传递_java JNI 二维数组作为方法参数传递给本地
- 2020年系统集成项目管理工程师下午真题
- css设置元素继承父元素宽度_详解CSS中的百分比的应用
- Linux、Ubuntu、CentOS安装和配置zsh
- Hicharts实现世界地图思路及踩过的坑(含中文GeoJSON数据集及详细代码)
- C语言小案例_OA大典故障案例摘录【第1390篇】夏普mxm2608n 黑白复印机漏粉
- SpringBoot java串口操作(rxtx)
- 医用自动配药柜的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 水声信号混响matlab,水声信号
- matlab persistent,新见到的MATLAB变量类型 persistent
- Anaconda多环境python管理(创建、删除、复制环境)
- 高考选日语可以学计算机吗,如果高考选日语,大学选专业有什么限制
- 在IE浏览器中如何直接显示word文档
- Ubuntu16.04下caffe CPU版的详细安装步骤
- 硬件物料清单bom检查小技巧
- html中头向下的箭头怎么打出来,向下的箭头怎么打,最简单实用的电脑知识
热门文章
- Backbone 之 Inception:纵横交错 (Pytorch实现及代码解析)
- Spring boot+Vue前后端分离项目实战——学生管理系统【三】后端
- 获取子元素到父元素滚动距离
- 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'cre
- 输入N,打印N边正方形
- vant 组件库中的 图片上传组件(多张图片上传,删除图片传自定义参数)
- getParameter用法
- linux ubuntu软件中心,分享|App Grid:一个优秀的Ubuntu软件中心替代品
- python零基础到实践——起步
- 【算法设计与分析】期末考试知识总结(知识超浓缩版)