在 input 的 placeholder中 使用iconfont

写在前面

 

 

 

 产品要求放大镜和文字放在一起。用定位，位置不准确，就会导致手机上错位，丑的一批。

进入正题 如何在input的 placeholder 中使用图标呢？

以阿里巴巴的矢量图标库为例， 现在有三种引入方式  Unicode 、 Font class 、 Symbol（为了多色）。

我们现在引入方式是Font class 、 Symbol两种同时使用，Symbol仅仅是为了多色图标。又啰嗦了，进入正题进入正题。

注意要加图标类名 比如 iconfont（必看）

1、Unicode方式

1、不要直接赋值 例如

<input type="text" class="iconfont search" placeholder='&#xe65a;'>

2、通过vue的bind 注意把&#x改成 \u

<input type="text" class="iconfont search" :placeholder='"\ue65a"'>

2、Font class方式

同上不过是从伪类的content里面拿到  例如 \e7bc 变成 \ue7bc 多一个u，同样是bind

<input type="text" class="iconfont search" :placeholder='"\ue7bc"'>

写在最后

产品真是操蛋