【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题

出现的问题:

使用uview组件u-input框密码绑定时会出现右侧密码显隐图标不显示的问题

思路:

1.看了下uview源码,发现这有一段注释,我们需要把源码修改一下,问题出在这里

 

 这行代码修改为 :password="password || type === 'password' || false"

2.其次发现uview源码里面并没有密码显隐的图标,这就需要我们在使用的页面自己去添加

Input 输入框 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

这就需要在u-input框里面使用到后置插槽了

代码

demo样式

1.修改视图层代码,来动态改变icon的样式

	<u-input confirmType="done" v-model="accountForm.userPassword":password="password" :clearable="true" placeholder="请输入您的登录密码":placeholder-style="placeholderStyle" border="none"><template slot="suffix"><u-icon :name="password ? 'eye': 'eye-fill'" size="24"@click="handleShowPass"></u-icon></template></u-input> 

2.逻辑层代码控制密码的显隐

	handleShowPass() {this.password = ! this.password}

实现效果图如下:

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

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

相关文章

等保案例 1

用户简介 吉林省人力资源和社会保障厅&#xff08;简称“吉林省人社厅”&#xff09;响应《网络安全法》的建设要求&#xff0c;为了向吉林省人民提供更好、更快、更稳定的信息化服务&#xff0c;根据《网络安全法》和等级保护2.0相关标准&#xff0c;落实网络安全与信息化建设…

C++异常

目录 一、C语言处理错误的常用方式二、C异常的概念三、异常的使用3.1 异常的抛出和捕获3.2 异常的重新抛出3.3 异常安全3.4 异常规范 四、自定义异常体系五、C标准库的异常体系六、异常的优缺点&#xff08;重点&#xff09; 一、C语言处理错误的常用方式 传统的错误处理机制&…

机器人CPP编程基础-01第一个程序Hello World

很多课程先讲C/C或者一些其他编程课&#xff0c;称之为基础课程。然后到本科高年级进行机器人专业课学习&#xff0c;这样时间损失非常大&#xff0c;效率非常低。 C/单片机/嵌入式/ROS等这些编程基础可以合并到一门课中进行实现&#xff0c;这些素材已经迭代三轮以上&#xf…

Python Opencv实践 - 图像旋转

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR)#图像旋转 #Opencv中的旋转&#xff0c;首先通过cv.getRotationMatrix2D获得旋转矩阵 #cv.getRotationMatrix2D(center,ang…

IDEA项目实践——Spring集成mybatis、spring当中的事务

系列文章目录 IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映射、注解开发 IDEA项目实践——Spring框架简介&#xff0c;以及IOC注解 IDEA项目实践—…

ElementUI的MessageBox的按钮置灰且不可点击

// this.$confirmthis.$alert(这是一段内容, 标题名称, {confirmButtonText: 确定,confirmButtonCLass: confirmButton,beforeClose: (action,instance,done) > {if (action confirm) {return false} else {done()}});}.confirmButton {background: #ccc !important;cursor…

HDMI接口的PCB布局布线要求

高清多媒体接口&#xff08;High Definition Multimedia Interface&#xff09;&#xff0c;简称&#xff1a;HDMI&#xff0c;是一种全数字化视频和声音发送接口&#xff0c;可以发送未压缩的音频及视频信号。随着技术的不断提升&#xff0c;HDMI的传输速率也不断的提升&#…

DoIP学习笔记系列:(六)满足AES128-CMAC算法的“安全认证”.dll生成实践

文章目录 1. 算法Demo2. 算法实现传送门 DoIP学习笔记系列:导航篇 AES128-CMAC算法在汽车电子控制单元的软件开发中涉及到安全相关的需求经经常用到,具体的算法原理请各位小伙伴自行百度,本篇主要向大家分享该算法如何集成到.dll文件中,在OTA、刷写等场景作为$27服务的安全…

24届近5年南京大学自动化考研院校分析

今天给大家带来的是南京大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、南京大学 学校简介 南京大学是一所历史悠久、声誉卓著的高等学府。其前身是创建于1902年的三江师范学堂&#xff0c;此后历经两江师范学堂、南京高等师范学校、国立东南大学、国立第四中…

集群、负载均衡集群、高可用集群简介,LVS模式和haproxy/nginx模式拓扑介绍

一.集群的定义 1.定义 2.分类 &#xff08;1&#xff09;负载均衡集群 &#xff08;2&#xff09;高可用集群 二.使用集群的意义 1.高性价比和性能比 2.高可用性 3.可伸缩性强 4.持久和透明性高 三.常见的两种集群模式拓扑 1.LVS集群模式 2.haproxy/nginx模式 四.常…

Rust 编程小技巧摘选(8)

目录 Rust 编程小技巧(8) 1. 取整函数 floor() 2. 取整函数ceil() 3. 取整函数 round() 4. 保留小数位数 5. 字符串转整数 unwrap() unwrap_or() Rust 编程小技巧(8) 1. 取整函数 floor() floor函数对浮点数进行向下取整 示例代码&#xff1a; fn main() {let x: …

视觉学习(七)---Flask 框架下接口调用及python requests 实现json字符串传输

在项目实施过程中需要与其他系统进行接口联调&#xff0c;将图像检测的结果传递给其他系统接口&#xff0c;进行逻辑调用。这中间的过程可以通过requests库进行实现。 1.安装requests库 pip install requests2.postman 接口测试 我们先通过postman 了解下接口调用&#xff0…