本文介绍如何在微信小程序中使用Vant组件库的van-field输入框控件，并通过自定义left-icon属性替换默认图标。通过从阿里巴巴矢量图标库下载PNG图片，并在WXML中绑定本地图片路径，在JS中定义图标变量，实现输入框左侧图标的个性化定制。
前言
在开发微信小程序时，Vant 组件库是常用的 UI 框架，其中 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 相关内容，可查阅本站过往文章或继续浏览后续教程，感谢支持。