如何將iconfont圖標引入到vant的Tabbar標簽欄里邊

更新時間：2022年04月26日 10:21:24 作者：傻她你呀

這篇文章主要介紹了如何將iconfont圖標引入到vant的Tabbar標簽欄里邊，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

將iconfont圖標引入vant的Tabbar標簽欄里

vant的Tabbar標簽欄https://youzan.github.io/vant/

在app開發(fā)中，這個必不可少，上一張講了怎么引入iconfont圖標，現(xiàn)在就將iconfont圖標引入到tabbar標簽欄里邊，看著vant提供的圖標，必將有點丑啊23333，接下來就是引入方法：

1. 首先引入tabbar

2. 以基礎(chǔ)代碼為例

我現(xiàn)在就把這個第一個圖標換掉，換成iconfont圖標

第一個圖標標簽為

<van-tabbar-item icon="home-o">標簽</van-tabbar-item>

把這行代碼換成如下：

<van-tabbar-item>
? ? <van-icon class="iconfont" class-prefix='icon' slot="icon" slot-scope="props" :name='props.active ? icon.home_active:icon.home_normal'></van-icon>
? ? <span>home</span>
</van-tabbar-item>

相應(yīng)的，js代碼為：

slot-scope="props" 這個屬性就是用來判斷圖標是不是被選中的，

這是官方文檔的原話。

:name='props.active ? icon.home_active:icon.home_normal' 這行代碼的意思就是

當 props.active 為 true，說明處于選中狀態(tài)，此時會調(diào)用名稱 icon.home_active，如果不在選中狀態(tài)，那么會調(diào)用名稱 icon.home_normal，通過查看js代碼，可以知道，icon.home_active 就是 home，icon.home_normal 就是 homefill

之所以是這個名稱，那是因為

可以看見iconfont矢量圖的名稱就是home 和 homefill，這可不是我隨便取的，要看看你想調(diào)用的iconfont圖標名稱是啥

于是，:name='props.active ? icon.home_active:icon.home_normal 還可以這么理解：

當處于選中狀態(tài)的時候，調(diào)用 homefill圖標，不是選中狀態(tài)的是，調(diào)用home圖標

接下來看看效果：

處于選中狀態(tài)的時候，

不是選中狀態(tài)的時候，

這么一來就可以實現(xiàn) iconfont圖標的自由切換了，隨心所欲，可能有些小伙伴想要改變顏色，這個其實很簡單，官方文檔就有修改顏色的方法：https://youzan.github.io/vant/

我把處于選中狀態(tài)的時候顏色變成 hotpink，一個很騷的顏色

這就是效果圖，好騷啊23333

方法分享就到這里了，其實如果想有實際應(yīng)用的話，應(yīng)該要加上路由模式，這樣一個Tabbar標簽欄才算是一個比較完美的Tabbar標簽欄。

vue+vant引入iconfont字體圖標

使用的是iconfont的圖標，下載至本地使用的，圖標比較少，使用的文件中引入，使用import或者css的@import都不行，一直報錯最后被逼無奈，在main.js中引入的圖標

這不是我本意，后續(xù)有時間繼續(xù)探討在指定文件引入字體圖標的問題

使用的時候是van-field的組件中使用的，該組件自帶了后綴圖標的引入方法：

<van-field
  v-model="value1"
  label="文本"
  left-icon="smile-o"
  right-icon="warning-o"
  placeholder="顯示圖標"
/>

其中l(wèi)eft-icon表示在左側(cè)插入圖標，right-icon表示在右側(cè)插入圖標，但是直接使用iconfont的方法寫入不生效

最后解決辦法是在van-field的組件中插入van-icon的組件結(jié)合slot的方法插入，代碼如下

<van-field
  v-model='textarea'
  rows='2'
  maxlength = '200'
  label='請輸入留言'
  show-word-limit
  placeholder='可以點擊語音輸入文字'
  @click-right-icon='getSpeak'>
  <van-icon class='iconfont' class-prefix='icon' slot='right-icon' name='yuyin'></van-icon>
</van-field>

其中class-prefix=‘icon’的寫法固定，暫時未找到其原因，slot='right-icon'表示插入到van-field中的right-icon中，最后呈現(xiàn)效果