微信小程序van-field中的left-icon屬性自定義實現(xiàn)過程
更新時間：2023年08月28日 09:28:51 作者：Java?Fans
在小程序中，我們是用 Vant 組件庫時，常常會用到 van-field 輸入框控件，今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實現(xiàn)，感興趣的朋友一起看看吧
前言
在小程序中，我們是用 Vant 組件庫時，常常會用到 van-field 輸入框控件；詳細(xì)用法我就不過度闡述了，可以參考官方文檔：Field 輸入框使用。
今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實現(xiàn)。
原始效果
上面效果的代碼如下：
login.wxml:
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ username }}" left-icon="manager" placeholder="請輸入用戶名/手機(jī)號" 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="請輸入密碼" 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="圖形驗證碼" border="{{ true }}" />
<van-image width="80" height="40" src="{{captchaUrl}}" bind:click="refreshCaptcha" />
</view>從上面代碼我們可以看出來 left-icon 使用的是 Vant 組件中的默認(rèn)圖標(biāo)，那我們怎么修改呢？請看下面~
期望效果
將原始效果中的圖標(biāo)更換為上面這種樣式，或是自定義是怎么做到的呢？
首先，我們從 阿里巴巴矢量圖標(biāo)庫 中下載這三個圖標(biāo)的png圖片；可選擇你需要的顏色。
login.wxml 代碼如下：
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ username }}" left-icon="{{userIcon}}" placeholder="請輸入用戶名/手機(jī)號" 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="請輸入密碼" 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="圖形驗證碼" border="{{ true }}" />
<van-image width="80" height="40" src="{{captchaUrl}}" bind:click="refreshCaptcha" />
</view>login.js 代碼如下：
data: {
yzmIcon:'/static/驗證碼.png',
pwdIcon:'/static/密碼.png',
userIcon:'/static/我的.png'
},素材的存放位置如下：
至此，我們就完美解決了微信小程序van-field控件中 left-icon 自定義圖片功能。
到此這篇關(guān)于微信小程序van-field中的left-icon屬性自定義的文章就介紹到這了,更多相關(guān)微信小程序van-field內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js+springMVC 提交數(shù)組數(shù)據(jù)到后臺的實例
今天小編就為大家分享一篇js+springMVC 提交數(shù)組數(shù)據(jù)到后臺的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
下面小編就為大家?guī)硪黄猨s實時獲取窗口大小變化的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
本文詳細(xì)介紹了js中Json的語法與編寫格式，有需要的朋友可以看下2016-11-11
這篇文章主要為大家詳細(xì)介紹了js輕松實現(xiàn)彈框顯示選項效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了微信小程序通過js實現(xiàn)瀑布流布局詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
JS+CSS實現(xiàn)的藍(lán)色table選項卡效果
這篇文章主要介紹了JS+CSS實現(xiàn)的藍(lán)色table選項卡效果,通過鼠標(biāo)事件調(diào)用自定義函數(shù)實現(xiàn)頁面元素樣式的遍歷與動態(tài)切換效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
在IE下 JavaScript 中可以在任何地方使用全局的window.event來取得本次JavaScript被觸發(fā)的Event，從而取得 KeyCode，EventSourceElement 等對象。2009-06-06
js數(shù)組方法reduce經(jīng)典用法代碼分享
本文給大家整理了很多關(guān)于js數(shù)組方法reduce的經(jīng)典代碼片段，能夠讓大家更好的理解reduce的實例用法，一起學(xué)習(xí)下吧。2018-01-01
下面小編就為大家?guī)硪黄狫S驗證圖片格式和大小并預(yù)覽的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript中創(chuàng)建字典對象（dictionary）實例
這篇文章主要介紹了JavaScript中創(chuàng)建字典對象（dictionary）實例,本文直接給出了實現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下2015-03-03