<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> 
pure111
- 发布：2022-04-12 14:52
- 更新：2022-04-24 16:10
- 阅读：1475
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 1909
HBuilderX类型： 正式
HBuilderX版本号： 3.3.13
手机系统： Android
手机系统版本号： Android 12
手机厂商： 模拟器
手机机型： HUAWE OXF-AN00
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
<!-- #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>
<!-- #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进行显示
预期结果：
app-NUE中输入框中的密码，随着password这个属性的true /flase进行显示
实际结果：
①输入框中的密码，一直是第一次赋值的true状态，随后进行更改false不生效
②若第一次将password赋值为false，再进行修改为true，第一次false生效，第二次修改为true生效，第三次修改为false不生效
①输入框中的密码，一直是第一次赋值的true状态，随后进行更改false不生效
②若第一次将password赋值为false，再进行修改为true，第一次false生效，第二次修改为true生效，第三次修改为false不生效
bug描述：
【报Bug】u-view中 u--input 的password动态绑定在APP-NVUE端失效，在H5端是正常的
使用的是雷电 安卓模拟器
现有的需求，登录页面-密码输入框-点击眼睛展示密码-再点击则不展示密码，展现的是密码状态，H5端正常，nvue打包在安卓模拟器上的失效
绑定值 永远是false的状态 是可以展示的，但是以动态绑定值就会没有效果
4 个回复
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光标由于原生是绿色的，没办法修改光标的颜色，可能是本人研究的浅，有哪位大佬给个提示提示一下。万分感谢！
x***@163.com
感谢,解决了这个bug
2024-01-17 09:05