pure111
pure111
  • 发布:2022-04-12 14:52
  • 更新:2022-04-24 16:10
  • 阅读:1022

【报Bug】u-view中 u--input 的password动态绑定在app端失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 1909

HBuilderX类型: 正式

HBuilderX版本号: 3.3.13

手机系统: Android

手机系统版本号: Android 12

手机厂商: 模拟器

手机机型: HUAWE OXF-AN00

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
	<view class="login-root-view">  
		<view class="content">  
			<view class="contentInput">  
				<text class="contentInputText">密码</text>  
				<!-- 注意:由于兼容性差异,使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->  
				<!-- #ifndef APP-NVUE -->  
				<u-input placeholder="请输入密码" border="bottom" clearable :password='isPassword' v-model="password">  
					<!-- #endif -->  
					<!-- #ifdef APP-NVUE -->  
					<u--input placeholder="请输入密码" border="bottom" clearable :password='isPassword'  v-model="password">  
						<!-- #endif -->  
						<template slot="suffix">  
							<u-icon name="eye" size="40" v-if='isPassword' @click='isPassword=!isPassword'></u-icon>  
							<u-icon name="eye-fill" size="40" v-if='!isPassword' @click='isPassword=!isPassword'>  
							</u-icon>  
						</template>  
						<!-- #ifndef APP-NVUE -->  
				</u-input>  
				<!-- #endif -->  
				<!-- #ifdef APP-NVUE -->  
				</u--input>  
				<!-- #endif -->  
			</view>  
			<u-button text="登录" type="primary" class="contentLoginBtn" shape='circle'></u-button>  
		</view>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				isPassword: true,//密码是否显示  
password:"" //密码  
			};  
		},	  
		mounted() {},  
		methods: {  
		}  
	};  
</script>  

操作步骤:
<!-- #ifndef APP-NVUE -->  
				<u-input placeholder="请输入密码" border="bottom" clearable :password='isPassword' v-model="password">  
					<!-- #endif -->  
					<!-- #ifdef APP-NVUE -->  
					<u--input placeholder="请输入密码" border="bottom" clearable :password='isPassword' v-model="password">  
						<!-- #endif -->  
						<template slot="suffix">  
							<u-icon name="eye" size="40" v-if='isPassword' @click='isPassword=!isPassword'></u-icon>  
							<u-icon name="eye-fill" size="40" v-if='!isPassword' @click='isPassword=!isPassword'>  
							</u-icon>  
						</template>  
						<!-- #ifndef APP-NVUE -->  
				</u-input>  

预期结果:

预期结果:
app-NUE中输入框中的密码,随着password这个属性的true /flase进行显示

实际结果:

①输入框中的密码,一直是第一次赋值的true状态,随后进行更改false不生效
②若第一次将password赋值为false,再进行修改为true,第一次false生效,第二次修改为true生效,第三次修改为false不生效

bug描述:

【报Bug】u-view中 u--input 的password动态绑定在APP-NVUE端失效,在H5端是正常的

使用的是雷电 安卓模拟器

现有的需求,登录页面-密码输入框-点击眼睛展示密码-再点击则不展示密码,展现的是密码状态,H5端正常,nvue打包在安卓模拟器上的失效

绑定值 永远是false的状态 是可以展示的,但是以动态绑定值就会没有效果

2022-04-12 14:52 负责人:无 分享
已邀请:
pure111

pure111 (作者)

我这边暂时的解决方案和你的有点类似:
①解决动态切换问题
uview 的u-input组件源码 做出了如下修改

②光标移动到index为0问题
在使用到input的页面去操作dom(只是暂时的解决方案,希望官方可以赶紧解决这个bug)

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

首先 vue页面请用u-别用u-- 其次 你发一个可复现的demo出来看下

  • pure111 (作者)

    你好,之前没有用markdown语法导致没发全代码,您再看一下,上面就是我的代码,vue和nvue是有用条件编译进行的


    2022-04-13 10:30

  • pure111 (作者)

    示例代码就是可复现的demo


    2022-04-13 10:31

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

好的,你这个代码我试下

绝学无忧

绝学无忧

我最近也遇到这个问题,看了看uview 的u-input组件源码,在u-input文件里把图中灰色部分拿掉,后果是否有BUG产生未测,暂时可以解决无法动态切换的问题。但是切换过程中软键盘会来回跳动,并且切换之后光标会自动跳到文本下标为0的地方,这得好好再研究研究。话说回来在NVUE文件当中,Input光标由于原生是绿色的,没办法修改光标的颜色,可能是本人研究的浅,有哪位大佬给个提示提示一下。万分感谢!

要回复问题请先登录注册