微信小程序van-field中的left-icon屬性自定義實(shí)現(xiàn)過(guò)程
前言
在小程序中，我們是用 Vant 組件庫(kù)時(shí)，常常會(huì)用到 van-field 輸入框控件；詳細(xì)用法我就不過(guò)度闡述了，可以參考官方文檔：Field 輸入框使用。
今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實(shí)現(xiàn)。
原始效果
上面效果的代碼如下：
login.wxml:
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ username }}" left-icon="manager" placeholder="請(qǐng)輸入用戶名/手機(jī)號(hào)" border="{{ true }}" />
</van-cell-group>
</view>
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ password }}" type="{{ showPassword ? 'text' : 'password' }}" icon="{{ showPassword ? 'closed-eye' : 'eye-o' }}" bind:click-icon="togglePassword" left-icon="lock" placeholder="請(qǐng)輸入密碼" border="{{ true }}" />
</van-cell-group>
<icon type="{{ showPassword ? 'eye' : 'closed-eye' }}" size="20" bindtap="togglePassword" />
</view>
<view class="input-container">
<van-field model:value="{{ captcha }}" left-icon="photo" color='red' placeholder="圖形驗(yàn)證碼" border="{{ true }}" />
<van-image width="80" height="40" src="{{captchaUrl}}" bind:click="refreshCaptcha" />
</view>從上面代碼我們可以看出來(lái) left-icon 使用的是 Vant 組件中的默認(rèn)圖標(biāo)，那我們?cè)趺葱薷哪?？?qǐng)看下面~
期望效果
將原始效果中的圖標(biāo)更換為上面這種樣式，或是自定義是怎么做到的呢？
首先，我們從 阿里巴巴矢量圖標(biāo)庫(kù) 中下載這三個(gè)圖標(biāo)的png圖片；可選擇你需要的顏色。
login.wxml 代碼如下：
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ username }}" left-icon="{{userIcon}}" placeholder="請(qǐng)輸入用戶名/手機(jī)號(hào)" border="{{ true }}" />
</van-cell-group>
</view>
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ password }}" type="{{ showPassword ? 'text' : 'password' }}" icon="{{ showPassword ? 'closed-eye' : 'eye-o' }}" bind:click-icon="togglePassword" left-icon="{{pwdIcon}}" placeholder="請(qǐng)輸入密碼" border="{{ true }}" />
</van-cell-group>
<icon type="{{ showPassword ? 'eye' : 'closed-eye' }}" size="20" bindtap="togglePassword" />
</view>
<view class="input-container">
<van-field model:value="{{ captcha }}" left-icon="{{yzmIcon}}" color='red' placeholder="圖形驗(yàn)證碼" border="{{ true }}" />
<van-image width="80" height="40" src="{{captchaUrl}}" bind:click="refreshCaptcha" />
</view>login.js 代碼如下：
data: {
yzmIcon:'/static/驗(yàn)證碼.png',
pwdIcon:'/static/密碼.png',
userIcon:'/static/我的.png'
},素材的存放位置如下：
至此，我們就完美解決了微信小程序van-field控件中 left-icon 自定義圖片功能。
到此這篇關(guān)于微信小程序van-field中的left-icon屬性自定義的文章就介紹到這了,更多相關(guān)微信小程序van-field內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript數(shù)據(jù)檢測(cè)方法的全面指南
在?JavaScript?開(kāi)發(fā)中,準(zhǔn)確檢測(cè)數(shù)據(jù)類型是保證代碼健壯性的基礎(chǔ),JavaScript?提供了多種數(shù)據(jù)類型檢測(cè)方法,每種方法都有其適用場(chǎng)景和局限性,本文將全面介紹?JavaScript?中各種數(shù)據(jù)檢測(cè)方法,需要的朋友可以參考下2025-07-07
javascript eval函數(shù)深入認(rèn)識(shí)
發(fā)現(xiàn)為本文起一個(gè)合適的標(biāo)題還不是那么容易，呵呵，所以在此先說(shuō)明下本文的兩個(gè)目的2009-02-02![js之完全兼容ie與firefox的拖動(dòng)層代碼[測(cè)試好用]](http://img.jbzj.com/images/xgimg/bcimg2.png)
js之完全兼容ie與firefox的拖動(dòng)層代碼[測(cè)試好用]
經(jīng)測(cè)試，這個(gè)拖到效果不錯(cuò)，多瀏覽器支持。方便做網(wǎng)站的朋友使用2008-10-10
tostring 和 valueOf 函數(shù)是解決值的顯示和運(yùn)算的問(wèn)題，本文主要介紹了js中toString()與valueOf()的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
對(duì)于js 我是個(gè)初學(xué)者 甚至還不入門，我比較喜歡js做出的特效。2011-07-07
js+css使DIV始終居于屏幕中間 左下 左上 右上 右下的代碼集合
js+css使DIV始終居于屏幕中間 左下 左上 右上 右下的代碼集合，需要的朋友可以參考下。2011-03-03
獲取radio選中值的方法有很多，在本文為大家介紹的是使用for循環(huán)來(lái)實(shí)現(xiàn)，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-10-10
JavaScript自動(dòng)內(nèi)存管理與垃圾回收策略詳細(xì)分析講解
JS的垃圾回收機(jī)制是為了以防內(nèi)存泄漏，內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時(shí)這塊內(nèi)存還存在著，垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量，并釋放掉它們所指向的內(nèi)存。因?yàn)閮?nèi)存的大小是有限的，所以當(dāng)內(nèi)存不再需要的時(shí)候，我們需要對(duì)其進(jìn)行釋放2023-01-01
JS實(shí)現(xiàn)的自定義右鍵菜單實(shí)例二則
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義右鍵菜單,以兩則實(shí)例形式分析了javascript自定義右鍵菜單效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
webpack常用構(gòu)建優(yōu)化策略小結(jié)
這篇文章主要介紹了webpack常用構(gòu)建優(yōu)化策略小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11