脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript中的ubound函数使用实例

    JavaScript中的ubound函数使用实例

    这篇文章主要介绍了JavaScript中的ubound函数使用实例,本文先是讲解了ubound函数的语法,然后给出了用法代码实例,需要的朋友可以参考下
    2014-11-11
  • 微信小程序实现禁止分享代码实例

    微信小程序实现禁止分享代码实例

    这篇文章主要介绍了微信小程序实现禁止分享代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 如何写出一个惊艳面试官的JavaScript深拷贝

    如何写出一个惊艳面试官的JavaScript深拷贝

    浅拷贝是面试中经常会被问到的问题,这篇文章主要给大家介绍了关于如何写出一个惊艳面试官的JavaScript深拷贝的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • CSS常用网站布局实例

    CSS常用网站布局实例

    PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！
    2008-04-04
  • 子父窗口之间的操作

    子父窗口之间的操作

    子父窗口之间的操作...
    2006-07-07
  • 用JavaScript实现仿Windows关机效果

    用JavaScript实现仿Windows关机效果

    用JavaScript实现仿Windows关机效果...
    2007-03-03
  • 一起盘点JavaScript中一些强大的运算符

    一起盘点JavaScript中一些强大的运算符

    javascript中的运算符大多由标点符号表示,少数由关键字表示,它们的语法言简意赅,它们的数量却着实不少,下面这篇文章主要给大家介绍了关于JavaScript中一些强大的运算符的相关资料,需要的朋友可以参考下
    2021-11-11
  • ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

    ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

    这篇文章主要介绍了ES5 模拟 ES6 的 Symbol 实现私有成员功能,结合实例形式分析了ES5 模拟 ES6 的 Symbol 实现私有成员功能相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 概述BootStrap中role=

    概述BootStrap中role="form"及role作用角色

    这篇文章主要介绍了BootStrap中role="form"及role作用角色介绍，以及bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义简单介绍，需要的朋友参考下
    2016-12-12
  • JavaScript实现移动端禁止下拉露出网址广告屏蔽技巧

    JavaScript实现移动端禁止下拉露出网址广告屏蔽技巧

    这篇文章主要为大家介绍了JavaScript实现移动端禁止下拉露出网址或的广告屏蔽技巧示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06

最新评论