欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序van-field中的left-icon屬性自定義實(shí)現(xiàn)過(guò)程

 更新時(shí)間：2023年08月28日 09:28:51   作者：Java?Fans  
在小程序中，我們是用 Vant 組件庫(kù)時(shí)，常常會(huì)用到 van-field 輸入框控件，今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實(shí)現(xiàn)，感興趣的朋友一起看看吧

前言

在小程序中，我們是用 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)文章

最新評(píng)論