vue placeholder 引用 字体 图标 繁體版
原文   原文链接

先说一下问题:在placeholder中想使用字体图标,结果渲染不正确,代码如图vue

效果如图app

在网上get到了解决方法:字体

在VUE组件中,给placeholder添加图标,须要注意如下几点:编码

一、不要给placeholder直接赋值,以下spa

<input type="text" class="iconfont search" placeholder='&#xe65a; 搜索音乐、视频、歌词、电台'>

应该使用:placeholder对此属性进行绑定赋值,以下3d

<input type="text" class="iconfont search" :placeholder='icon'>
export default {
  name: 'app',
  data:function(){
    return{
      icon:'\ue65a 搜索音乐、视频、歌词、电台'
    }
  }
}

二、iconfont的值,必须是字体的unicode编码code

例如:视频

阿里巴巴字体库的unicode引用为 &#xe65a; 在vue组件中引用时,则为 \ue65a
blog

在\u加阿里unicode字体编码后4位便可。unicode

而后就ok啦

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息