关于Vue项目placeholder中使用iconfont的问题

关于Vue项目placeholder中使用iconfont的问题

首先自然是需要在 iconfont中引入链接，

当然不能忘记 记得定义.class 来接收 复制过来的字体文件

因为iconfont只会自动生成 @font-face 代码 而class中需要引入此 样式字体文件才能生效如:
并且 自动生成的 是没有带http:前缀的可能出现无法访问 自行添加即可

@font-face {
    font-family: 'iconfont';  /* project id 1224683 */
    src: url('http://at.alicdn.com/t/.eot');
    src: url('http://at.alicdn.com/t/.eot?#iefix') format('embedded-opentype'),
    url('http://at.alicdn.com/t/.woff2') format('woff2'),
    url('http://at.alicdn.com/t/.woff') format('woff'),
    url('http://at.alicdn.com/t/.ttf') format('truetype'),
    url('http://at.alicdn.com/t/.svg') format('svg');
  }

需要添加一个公共样式类 如

  .iconfont{
      font-family:"iconfont" !important;
      font-size:16px;font-style:normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
}

其中的 .iconfont 自行命名即可 只要关键代码 font-family:"iconfont" !important;存在即可

然后就是在 给 placeholder 使用的过程中 请不要直接 写入 复制到的字体代码
例如 iconfont 给的字体符号可能是  直接使用会发现是无效的 ，在placeholder需要使用Unicode编码 所以我们只需取 后面的有效三位 即可 然后加上\ue 前缀
例如：给出的是 那么 就应当为 \ue66e

最后一步在使用时请不要直接以特性的方式写入input 中 而应当以绑定数据的形式
如 :placeholder="'\ue600 请输入搜索内容'"

再提一句其他教程中没有提到的，最好在原生input 框中使用此方法，不然可能依旧无法使用，图标，只需把原本组件的样式复制一份然后粘贴上去就大功告成啦