快捷導(dǎo)航

如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊

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

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

將iconfont圖標(biāo)引入vant的Tabbar標(biāo)簽欄里

vant的Tabbar標(biāo)簽欄https://youzan.github.io/vant/

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

1. 首先引入tabbar

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

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

第一個(gè)圖標(biāo)標(biāo)簽為

<van-tabbar-item icon="home-o">標(biā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" 這個(gè)屬性就是用來(lái)判斷圖標(biāo)是不是被選中的，

這是官方文檔的原話。

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

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

之所以是這個(gè)名稱，那是因?yàn)?/p>

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

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

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

接下來(lái)看看效果：

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

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

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

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

這就是效果圖，好騷啊23333

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

vue+vant引入iconfont字體圖標(biāo)

使用的是iconfont的圖標(biāo)，下載至本地使用的，圖標(biāo)比較少，使用的文件中引入，使用import或者css的@import都不行，一直報(bào)錯(cuò)最后被逼無(wú)奈，在main.js中引入的圖標(biāo)

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

使用的時(shí)候是van-field的組件中使用的，該組件自帶了后綴圖標(biāo)的引入方法：

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

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

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

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

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