脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序van-field

微信小程序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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js+springMVC 提交数组数据到后台的实例

    js+springMVC 提交数组数据到后台的实例

    今天小编就为大家分享一篇js+springMVC 提交数组数据到后台的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实时获取窗口大小变化的实例代码

    js实时获取窗口大小变化的实例代码

    下面小编就为大家带来一篇js实时获取窗口大小变化的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 详解js中Json的语法与格式

    详解js中Json的语法与格式

    本文详细介绍了js中Json的语法与编写格式，有需要的朋友可以看下
    2016-11-11
  • 轻松实现js弹框显示选项

    轻松实现js弹框显示选项

    这篇文章主要为大家详细介绍了js轻松实现弹框显示选项效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 微信小程序通过js实现瀑布流布局详解

    微信小程序通过js实现瀑布流布局详解

    这篇文章主要介绍了微信小程序通过js实现瀑布流布局详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS+CSS实现的蓝色table选项卡效果

    JS+CSS实现的蓝色table选项卡效果

    这篇文章主要介绍了JS+CSS实现的蓝色table选项卡效果,通过鼠标事件调用自定义函数实现页面元素样式的遍历与动态切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • FireFox JavaScript全局Event对象

    FireFox JavaScript全局Event对象

    在IE下 JavaScript 中可以在任何地方使用全局的window.event来取得本次JavaScript被触发的Event，从而取得 KeyCode，EventSourceElement 等对象。
    2009-06-06
  • js数组方法reduce经典用法代码分享

    js数组方法reduce经典用法代码分享

    本文给大家整理了很多关于js数组方法reduce的经典代码片段，能够让大家更好的理解reduce的实例用法，一起学习下吧。
    2018-01-01
  • JS验证图片格式和大小并预览的简单实例

    JS验证图片格式和大小并预览的简单实例

    下面小编就为大家带来一篇JS验证图片格式和大小并预览的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript中创建字典对象（dictionary）实例

    JavaScript中创建字典对象（dictionary）实例

    这篇文章主要介绍了JavaScript中创建字典对象（dictionary）实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下
    2015-03-03

最新评论