uni-app中 u-view的u--input组件password属性动态绑定在app端失效
uni-app中 u-view的u–input组件password属性动态绑定在app端失效
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | Windows 10 1909 | 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>
### 操作步骤：
```html
<!-- #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的状态 是可以展示的，但是以动态绑定值就会没有效果
我这边暂时的解决方案和你的有点类似： ①解决动态切换问题 uview 的u-input组件源码 做出了如下修改
②光标移动到index为0问题
在使用到input的页面去操作dom(只是暂时的解决方案，希望官方可以赶紧解决这个bug)
我最近也遇到这个问题，看了看uview 的u-input组件源码，在u-input文件里把图中灰色部分拿掉，后果是否有BUG产生未测，暂时可以解决无法动态切换的问题。但是切换过程中软键盘会来回跳动，并且切换之后光标会自动跳到文本下标为0的地方，这得好好再研究研究。话说回来在NVUE文件当中，Input光标由于原生是绿色的，没办法修改光标的颜色，可能是本人研究的浅，有哪位大佬给个提示提示一下。万分感谢！
在 uni-app 中使用 u-view 的 u--input 组件时，如果 password 属性动态绑定在 App 端失效，可能是由于以下几个原因导致的：
1. 动态绑定的语法问题
确保你正确使用了动态绑定的语法。password 属性应该使用 v-bind 或 : 进行动态绑定。
<u--input v-model="inputValue" :password="isPassword" />2. 数据响应性问题
确保 isPassword 是一个响应式的数据。如果 isPassword 不是响应式的，动态绑定可能不会生效。
export default {
data() {
return {
inputValue: '',
isPassword: true // 确保这是一个响应式数据
};
}
};3. 组件版本问题
确保你使用的 u-view 版本是最新的，或者至少是支持 password 动态绑定的版本。旧版本可能存在一些 bug 或未实现的功能。
4. App 端兼容性问题
某些情况下，App 端可能存在兼容性问题。你可以尝试以下方法：
- 检查控制台日志：查看是否有任何错误或警告信息。
- 使用原生组件：如果
u--input在 App 端存在问题，可以尝试使用uni-app的原生input组件，并手动实现密码输入功能。
<input type="password" v-model="inputValue" v-if="isPassword" />
<input type="text" v-model="inputValue" v-else />5. 更新 u-view 组件
如果问题依然存在，建议更新 u-view 到最新版本，或者查看官方文档和社区是否有相关的解决方案。
6. 使用 v-if 替代动态绑定
如果动态绑定仍然无效，可以尝试使用 v-if 来切换不同的输入框。
<u--input v-model="inputValue" password v-if="isPassword" />
<u--input v-model="inputValue" v-else />