深圳深圳网站开发公司注册资金新规定

出现的问题：

使用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}

实现效果图如下：