在 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"'>

寫在最後

產品真是操蛋