vant van-field 密码输入框小程序里隐藏、显示密码bug总结

老规矩先上效果图:

vant  输入框组件  密码的隐藏与显示功能:

注:

用password属性控制密码的显示与隐藏

不要用type属性,type属性在真机上有时会没有效果

1、当然如果只用type=password  不需要切换显示、隐藏也可以使用。

2、如果用到了密码的显示与隐藏 最好 还是用  password属性 的true 和 false

3、右侧图标的显示  用right-icon 属性

然后用  passwordShow 变量控制 隐藏('closed-eye' ) 和 显示( 'eye-o') 对应的icon图标。

4、bind:click-icon  点击尾部显示与隐藏 图标时触发 方法

 代码如下:

 code:

            <view class="form_label"><van-fieldname="password"model:value="{{ password }}"password="{{passwordShow}}"maxlength="20"clearableright-icon="{{ passwordShow ? 'closed-eye' : 'eye-o' }}"placeholder="请输入密码"bind:click-icon="onClickIcon"></van-field></view>

js代码:

    data: {passwordShow: true},onClickIcon:function() {console.log('11111111+++')var that = thisthat.setData({passwordShow: !that.data.passwordShow})},

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

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

相关文章

面试问答之Spring进阶

文章目录 &#x1f412;个人主页&#xff1a;信计2102罗铠威&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;说说你对Spring的认识与理解&#x1f415;Bean的分类&#x1f415; BeanFactory 接口和ApplicationContex 接口 的区别&#x1f415;SpringBe…

CIA402协议笔记

文章目录 1、对象字典1.1 Mode of Operation&#xff08; 606 0 h 6060_h 6060h​)1.2 Modes of opration display( 606 1 h ) 6061_h) 6061h​) 2、状态机2.1 控制字&#xff08;ControlWord、6040h&#xff09;2.2 状态字&#xff08;StatusWord、6041h&#xff09;2.3 shutd…

视频扩散模型介绍 Video Diffusion Models Introduction

视频扩散模型介绍 Video Diffusion Models Introduction Diffusion 扩散模型中的一些概念DDPMDDIMCLIPLatent DiffusionStable DiifusionLoRADreamBoothControlNet 视频生成评估标准图片层面视频层面 前人的工作Make-A-VideoAlign your Latents 开源视频生成模型ModelScopeT2V&…

蓝桥杯-Set

目录 HashSet类常用方法 1 add(Object obj)方法 2 size() 方法 3 remove(Object obj)方法 4 contains()方法 5 clear() 方法 例题实战 set 一个不允许出现重复的元素&#xff0c;并且无序的集合&#xff0c;主要有HashSet实现类。 在判断重复元素的时候&#xff0c;Set集…

本地知识库搭建成功后,企业效率真的翻倍了

在如今这个快节奏的信息时代&#xff0c;对企业来说&#xff0c;拥有一套高效的知识管理系统早已不再是选项&#xff0c;而是必要。而本地知识库&#xff0c;它这个集信息存储、管理和查询于一体的平台&#xff0c;不仅改变了公司信息资源共享的方式&#xff0c;还帮助进一步提…

OpenCV学习笔记(二)——OpenCV简介

目录 图像基础和简介 OpenCV简介 OpenCV的发展历史 OpenCV的应用 OpenCV的核心模块 图像基础和简介 人们通过肉眼所看见的世界是通过图像来呈现的&#xff0c;那么什么是图像呢&#xff1f;在计算机里面&#xff0c;最基本的组成单元就是像素&#xff0c;图像是很多像素的…

基于单片机的医院输液系统设计

目 录 摘 要 Ⅰ Abstract Ⅱ 引 言 1 1系统方案设计与论证 3 1.1系统硬件结构总体设计方案 3 1.2点滴速度测量电路方案的选择与论证 3 1.3液面检测电路方案的选择与论证 4 1.4通过电机控制滴速电路的方案与论证 4 1.5显示器接口电路方案选择与论证 5 1.6键盘接口电路方案选择与…

(黑马出品_03)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式

&#xff08;黑马出品_03&#xff09;SpringCloudRabbitMQDockerRedis搜索分布式 微服务技术Docker 今日目标1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结 1.2…

【REST2SQL】11 基于jwt-go生成token与验证

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 【REST2SQL】07 GO 操作 Mysql 数据库 【RE…

紧握时代契机链接亿万家庭 创维汽车2024全球经销商大会圆满召开

3月6日&#xff0c;以“极致 见新境”创维汽车2024全球经销商大会在徐州隆重举行。徐州经开区管委会副主任季洪志&#xff0c;缅甸驻华大使馆商务参赞 Win Myat Aung&#xff0c;法国中小企业联盟主席 Xavier Michon-Lehnebach&#xff0c;创维集团、创维汽车创始人黄宏生&…

php常见的45个漏洞及解决方案

[TOC]&#xff08;太多了&#xff0c;目录只列出最重要的几个&#xff0c;剩下的同学们自己翻&#xff09; PHP作为一种广泛应用的服务器端脚本语言&#xff0c;在历史上曾曝出过多种安全漏洞。以下是一些PHP漏洞的类别及其简要解释&#xff0c;以及如何解决这些问题&#xff1…

Java精品项目--第5期基于SpringBoot的高速收费系统的设计分析与实现

项目使用技术栈 SpringBootMavenShiroMySQLMybatis-PlusJavaJDK1.8HTML 系统介绍 项目截图

dolphinscheduler试用(一)(边用边修bug。。。。create tenant error)

&#xff08;作者&#xff1a;陈玓玏&#xff09; 前提&#xff1a;部署好了dolphinscheduler&#xff0c;部署篇见https://blog.csdn.net/weixin_39750084/article/details/136306890?spm1001.2014.3001.5501 官方文档见&#xff1a;https://dolphinscheduler.apache.org/…

JavaEE进阶(13)案例综合练习——博客系统

接上次博客&#xff1a;JavaEE进阶&#xff08;12&#xff09;Spring事务和事务传播机制&#xff1a;事务回顾、Spring中事务的实现、Transactional详解&#xff08;用法、rollbackFor、事务隔离级别、事务传播机制&#xff09;-CSDN博客 目录 项目介绍 准备工作 数据准备 …

如何给Vue项目配置好一个nginx.conf文件?

如何给Vue项目配置好一个nginx.conf文件&#xff1f; 一般前端项目中&#xff0c;会有一个docker/nginx/nginx.conf文件&#xff0c;用于配置DockerFile配置等。 那么&#xff0c;如何给项目写好一个nginx.conf文件&#xff0c;以DockerFile为例&#xff1a; # 使用 Node.js …

《辐射4》是一款什么样的游戏 怎样在mac电脑上玩到《辐射4》辐射4攻略 辐射4开局加点 怎么在Mac电脑玩Steam游戏

辐射4&#xff08;Fallout 4&#xff09;是由Bethesda开发的一款动作角色扮演类游戏&#xff0c;为《辐射》系列游戏作品的第四代&#xff0c;于2015年11月10日发行。游戏叙述了主角一家在核爆当天&#xff08;2077年10月23日&#xff09;&#xff0c;被Vault-Tec&#xff08;避…

Spring Cloud Gateway核心之Predicate

路由 Predicate 工厂 Spring Cloud Gateway 将路由作为 Spring WebFluxHandlerMapping基础设施的一部分进行匹配。Spring Cloud Gateway 包含许多内置的路由Predicate 工厂。所有这些谓词都匹配 HTTP 请求的不同属性。多个 Route Predicate Factory 可以组合&#xff0c;并通过…

Android Studio中debug功能详解

本文为大家分享了Android Studio debug功能的具体使用方法&#xff0c;供大家参考&#xff0c;具体内容如下 运行debug模式 \1. 进入debug – 点击图中红色圆圈圈起的左边绿色按钮&#xff0c;运行app的debug模式&#xff0c;快捷键ShiftF9 – 点击图中红色圆圈圈起的右边按…

[数据结构初阶】栈

各位读者老爷好&#xff0c;鼠鼠我好久没写博客了&#xff08;太摆烂了&#xff09;&#xff0c;今天就基于C语言浅介绍一下数据结构里面的栈&#xff0c;希望对你有所帮助吧。 目录 1.栈的概念及结构 2.栈的实现 2.1定义栈 2.2.初始化栈 2.3.入栈 2.4.出栈 2.5.获取栈…

zabbix监控中间件服务

zabbix监控Nginx 自定义nginx访问量的监控项&#xff0c;首先要通过脚本将各种状态的值取出来&#xff0c;然后通过zabbix监控。找到自定义脚本上传到指定目录/etc/zabbix/script/ 在zbx-client客户端主机操作 #创建目录&#xff0c;然后将脚本上传到该目录mkdir /etc/zabbix/…