微信小程序van-field中的left-icon属性自定义实现过程
更新时间：2023年08月28日 09:28:51 作者：Java Fans
在小程序中，我们是用 Vant 组件库时，常常会用到 van-field 输入框控件，今天我将跟大家分享的是 van-field 输入框控件中的 left-icon 属性的自定义怎么实现，感兴趣的朋友一起看看吧
前言
在小程序中，我们是用 Vant 组件库时，常常会用到 van-field 输入框控件；详细用法我就不过度阐述了，可以参考官方文档：Field 输入框使用。
今天我将跟大家分享的是 van-field 输入框控件中的 left-icon 属性的自定义怎么实现。
原始效果
上面效果的代码如下：
login.wxml:
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ username }}" left-icon="manager" placeholder="请输入用户名/手机号" 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 组件中的默认图标，那我们怎么修改呢？请看下面~
期望效果
将原始效果中的图标更换为上面这种样式，或是自定义是怎么做到的呢？
首先，我们从 阿里巴巴矢量图标库 中下载这三个图标的png图片；可选择你需要的颜色。
login.wxml 代码如下：
<view class="input-container">
<van-cell-group>
<van-field model:value="{{ username }}" left-icon="{{userIcon}}" placeholder="请输入用户名/手机号" 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 自定义图片功能。
到此这篇关于微信小程序van-field中的left-icon属性自定义的文章就介绍到这了,更多相关微信小程序van-field内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 JavaScript 开发中,准确检测数据类型是保证代码健壮性的基础,JavaScript 提供了多种数据类型检测方法,每种方法都有其适用场景和局限性,本文将全面介绍 JavaScript 中各种数据检测方法,需要的朋友可以参考下2025-07-07
发现为本文起一个合适的标题还不是那么容易，呵呵，所以在此先说明下本文的两个目的2009-02-02![js之完全兼容ie与firefox的拖动层代码[测试好用]](//img.jbzj.com/images/xgimg/bcimg2.png)
经测试，这个拖到效果不错，多浏览器支持。方便做网站的朋友使用2008-10-10
tostring 和 valueOf 函数是解决值的显示和运算的问题，本文主要介绍了js中toString()与valueOf()的使用，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
对于js 我是个初学者 甚至还不入门，我比较喜欢js做出的特效。2011-07-07
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合，需要的朋友可以参考下。2011-03-03
获取radio选中值的方法有很多，在本文为大家介绍的是使用for循环来实现，具体的实现如下，感兴趣的朋友可以参考下2013-10-10
JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。因为内存的大小是有限的，所以当内存不再需要的时候，我们需要对其进行释放2023-01-01
这篇文章主要介绍了JS实现的自定义右键菜单,以两则实例形式分析了javascript自定义右键菜单效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了webpack常用构建优化策略小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
![js之完全兼容ie与firefox的拖动层代码[测试好用]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论