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

出现的问题:

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

思路:

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

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

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

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

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

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

代码

demo样式

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

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

	
									 

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

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

实现效果图如下:

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

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

你可能感兴趣的:(uni-app)