iconfont半月坑

不吐不舒服

正题之前，先吐槽一波阿里矢量图库：

1. 批量上传。慢，且容易丢包。应该跟其异步上传有关，传300个，只能回显几十个，点击保存之后，再次点击上传按钮，还不等你上传，它会戏剧性的自己回显一波，直接点保存，往复几遍，最终传上来的也不够数，也不知道哪些传了，哪些丢了，也不知道后面还会不会自己再传上来。即想它来，又怕它胡来~~~~
2. 批量私有。全部选中后，点击批量私有，发现只私有了一部分，有时是当前页的一部分，有时连下一页都带着私有了一部分，反正要实现全部私有，得反反复复好几拨。
3. 全选。全选后，点击批量操作（删除、私有都行），完事儿后全选状态不会消失，想再进行下一波全选操作，得先手动吧全选取消掉，再选上。

有事说事

        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很简单且经过这么长时间的沉淀已经很稳定，这次软磨硬泡了半个月，也踩了不少坑，还有很多东西要学，技术路，不好走！