微信小程序——van-field中的left-icon属性自定义

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。

🍎个人主页:Java Fans的博客

🍊个人信条:不迁怒,不贰过。小知识,大智慧。

💞当前专栏:微信小程序学习分享

✨特色专栏:国学周更-心性养成之路

🥭本文内容:微信小程序------van-field中的left-icon属性自定义

文章目录

前言

在小程序中,我们是用 Vant 组件库时,常常会用到 van-field 输入框控件;详细用法我就不过度阐述了,可以参考官方文档:Field 输入框使用

今天我将跟大家分享的是 van-field 输入框控件中的 left-icon 属性的自定义怎么实现。

原始效果

上面效果的代码如下:

login.wxml:

html 复制代码
  <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 代码如下:

html 复制代码
  <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 代码如下:

javascript 复制代码
  data: {
    yzmIcon:'/static/验证码.png',
    pwdIcon:'/static/密码.png',
    userIcon:'/static/我的.png'
  },

素材的存放位置如下:

至此,我们就完美解决了微信小程序van-field 控件中 left-icon 自定义图片功能。


码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目《国学周更---心性养成之路》,学习技术的同时,我们也注重了心性的养成。

相关推荐
郭邯3 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心5 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞10 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽10 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域21 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往21 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw21 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld1 天前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者1 天前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮1 天前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app