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…

20240306 大模型快讯

//社区生态// Anthropic释出人类最强大模型Claude 3。Anthropic公开目前人类最强大模型Claude 3&#xff0c;在数学、编程、多语言理解、视觉等多个维度性能均超过GPT-4和Gemini 1.0 Ultra。 //多模态大模型// Stability AI公开Stable Diffusion 3架构细节。Stability AI 发布…

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…

React富文本编辑器开发(十三)序列化

序列化 Slate 的数据模型是以序列化为目标构建的。具体而言&#xff0c;它的文本节点的定义使它们更容易一目了然&#xff0c;但也易于序列化为常见格式&#xff0c;如 HTML 和 Markdown。 而且&#xff0c;由于 Slate 使用普通的 JSON 来存储数据&#xff0c;您可以非常轻松…

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

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

一人企业:一个人也能赚钱的商业模式读书笔记

一人企业:一个人也能赚钱的商业模式 哈佛大学攻读MBA时,汤姆就给漫画投稿,虽然毕业之后在商界打拼,但从小喜欢画漫画的汤姆2010年还是毅然辞去一家大型食品公司营销副总裁这一光鲜的职位。他并非一时兴起,也没有变成反资本主义的嬉皮士。和其他人一样,他认真地规划并将他…

蓝桥杯-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;还帮助进一步提…

Android 10.0 系统Settings主菜单wifi二级菜单去掉返回acitonbar功能

1.前言 在10.0的系统产品定制化开发中,在原生系统Settings的主菜单蓝牙 wifi进入二级菜单中的页面中,最上面都有一个ActionBar的返回键,在 某种情况下进行产品定制的时候,不需要这个返回键,所以接下来分析下这个返回键布局,来实现功能 2.系统Settings主菜单蓝牙wifi二级…

Java入门 子类初始化

文章目录 九、子类初始化 九、子类初始化 子类不能继承构造方法&#xff0c;想要调用父类的构造方法就得使用super。 super()表示调用无参的构造方法&#xff0c;super()里面带几个参数&#xff0c;就是调用哪一个构造方法。&#xff08; 这里的调用相当于是执行&#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/…

Java入门 类的组合和复用 / 实例成员和类成员

文章目录 一、类的组合和复用二、实例成员与类成员所以总结一下&#xff1a; 一、类的组合和复用 我当时第一次看见&#xff0c;然后又看书上的定义&#xff0c;感觉真的是”高大上“&#xff0c;就是不好理解&#xff0c;后来一查才发现超级简单。 类的组合和复用&#xff1…

MOGDB/openGauss数据库gs dump备份脚本及备份清理

MOGDB/openGauss 数据库 gs_dump 备份脚本及备份清理 需要对 MOGDB/openGauss 进行每天逻辑备份。如下脚本分享给大家。 一、备份脚本 1.脚本 c.sh (可以改名字)# database dump shell # you should change the GAUSSHOME GAUSSPORT GAUSSDATA DUMP_USER DUMP_PASSWORD #!/bi…