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

在这里插入图片描述

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。
🍎个人主页:Java Fans的博客
🍊个人信条:不迁怒,不贰过。小知识,大智慧。
💞当前专栏:微信小程序学习分享
✨特色专栏:国学周更-心性养成之路
🥭本文内容:微信小程序——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 自定义图片功能。


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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 简单实验 v-for 循环

1.代码 <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <div id"list-rendering"><ol><li v-for"todo in todos">{{ todo.text }}</li></ol> </div> &…

AUTOSAR规范与ECU软件开发(实践篇)6.2 ETAS RTA系列工具入门

目录 1、 RTA系列工具安装方法 (1) ETAS RTA-RTE的安装方法 (2) ETAS RTA-BSW的安装方法

软件架构阐述

软件架构主要从以下几个方面进行阐述: 1. 架构模式 常见的软件架构模式有: 1. MVC架构 MVC全称Model-View-Controller,是一种分离视图和业务逻辑的软件设计典范,通过解耦来提高灵活性和复用性。 2. SOA架构 面向服务的架构(SOA)通过服务接口进行松耦合的组件编排,可以灵活可扩…

Redis的常用数据类型详解

Redis是一个开源的、基于内存的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息代理。Redis支持多种数据类型&#xff0c;包括字符串、列表、集合、有序集合、散列等。理解这些数据类型的特性和使用方式&#xff0c;对于充分利用Redis的能力至关重要。以下是对Redis…

【LeetCode】125. 验证回文串 - 双指针

这里写自定义目录标题 2023-8-24 09:31:12 125. 验证回文串 2023-8-24 09:31:12 最关键的是 注意 题目中的 “字母和数字都属于字母数字字符。” 使用ascii码进行判断就行了 class Solution {public boolean isPalindrome(String s) {int p 0, q s.length() - 1;while (…

自然语言处理从入门到应用——LangChain:链(Chains)-[通用功能:自定义Chain和Chain的异步API]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 创建自定义Chain 要实现自己的自定义链式连接&#xff0c;我们可以子类化Chain并实现以下方法&#xff1a; from __future__ import annotations from typing import Any, Dict, List, Optional from pydantic impor…

Jenkins自动化部署Vue项目

1、新建item&#xff0c;选择 Freestyle project 2、源码管理选择git&#xff0c;输入git仓库地址和授权账号&#xff0c;并指明要部署的分支 3、构建选择 Execute shell&#xff0c;输入vue项目打包命令 命令示例&#xff1a; source /etc/profile node -v npm config set re…

【stable-diffusion使用扩展+插件和模型资源(上】

文章目录 前言一、插件推荐1.qrcode-monster2.sd-webui-openpose-editor3.sd-webui-depth-lib4.roop&#xff08;换脸插件&#xff09;5.sd-webui-qrcode-toolkit&#xff08;艺术二维码&#xff09;5.光源控制6.二次元转真人7.动态视频转场&#xff08;loopback-wave&#xff…

无涯教程-PHP - preg_replace()函数

preg_replace() - 语法 mixed preg_replace (mixed pattern, mixed replacement, mixed string [, int limit [, int &$count]] ); preg_replace()函数的操作与POSIX函数ereg_replace()相同&#xff0c;不同之处在于可以在模式和替换输入参数中使用正则表达式。 可选的输…

社科院与美国杜兰大学金融管理硕士项目——畅游于金融世界

随着社会经济的不断发展&#xff0c;职场竞争愈发激烈&#xff0c;很多同学都打算通过报考研究生来实现深造&#xff0c;提升自己的综合能力和竞争优势&#xff0c;获得优质的证书。而对于金融专业的学生和在职人员来说&#xff0c;社科院与美国杜兰大学金融管理硕士项目是一个…

【Hello Algorithm】堆和堆排序

本篇博客简介&#xff1a; 讲解堆和堆排序相关算法 堆和堆排序 堆堆的概念堆的性质堆的表示形式堆的增加删除堆的最大值 堆排序堆排序思路时间复杂度为N的建堆方法已知一个近乎有序的数组 使用最佳排序方法排序 堆 堆的概念 这里注意&#xff01;&#xff01;&#xff01; 这…

ELK + Kibana + Logstash实现可视化日志

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;elasticsearch、kibana、logstash、日志收集、日志可视化☀️每日 一言&#xff1a;坚持就是胜利啊&#xff0c;哥~ 一、前言 面试官&#xff1a;在日常开发工作中你们是如何查看日志的呢&#x…

c++ 17 std::optional

std::optional是C17引入的一个模板类&#xff0c;旨在表示一个值可能存在或可能不存在&#xff0c;而不是使用特定的标记值或指针&#xff08;例如nullptr&#xff09;来表示值的缺失。 以下是std::optional的一些核心概念和用法&#xff1a; 基本用法 你可以用std::optiona…

【在Windows下搭建Tomcat HTTP服务】

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…

【Android】Mobile-Security-Framework-MobSF Manifest 静态扫描规则

前言 移动安全框架&#xff08;MobSF&#xff09;是一个自动化的一体化移动应用程序&#xff08;Android/iOS/Windows&#xff09;测试、恶意软件分析和安全评估框架&#xff0c;能够执行静态和动态分析。MobSF支持移动应用程序二进制文件&#xff08;APK、XAPK、IPA和APPX&am…

线性代数的学习和整理9(草稿-----未完成)

矩阵的乘法的映射图(不属于本文) 矩阵的乘法具有不可交换性 A*B ! B*A A左乘*B ! A右乘*B 假设A!0, B!0, 但是可能存在 A*B0 假设A!0, 但是可能存在 A*A0 如果已知 A*BC&#xff0c;那么 B A-*C ,但是B ! C*A- 线性代数&#xff0c;矩阵&#xff0c;属于代数学&#xff0c;不属…

Stable Diffusion web UI 部署详细教程

前言 本文使用 AutoDL 平台进行 Stable Diffusion web UI 云端部署 AutoDL 官网&#xff1a;AutoDL算力云 | 弹性、好用、省钱。租GPU就上AutoDL Stable Diffusion web UI 官网&#xff1a;AUTOMATIC1111/stable-diffusion-webui: Stable Diffusion web UI (github.com) 步…

Android项目如何上传Gitee仓库

前言 最近Android项目比较多&#xff0c;我都是把Android项目上传到Gitee中去&#xff0c;GitHub的话我用的少&#xff0c;可能我还是更喜欢Gitee吧&#xff0c;毕竟Gitee仓库用起来更加方便 一. 创建Gitee仓库 1. 先创建一个Gitee账号&#xff0c;然后登录上去 2. 创建Androi…

高精度运算(加减乘除乘法)

所谓高精度&#xff0c;就是大数的运算&#xff0c;这个大数可能是要远远超过现有数据类型的最大范围。如果我们想进行这样的运算&#xff0c;就要掌握计算的原理——竖式运算。 加法 我们这里先简单考虑非负数的加法&#xff0c;竖式这么列对吧&#xff1a; ①存储 我们如何…

leetcode 1035. 不相交的线

2023.8.25 本题可以转化为&#xff1a;求两数组的最长公共子序列。 进而可以用dp算法解决。 方法类似于这题最长公共子序列 。 代码如下&#xff1a; class Solution { public:int maxUncrossedLines(vector<int>& nums1, vector<int>& nums2) {vector<…