input密码框显示与隐藏
在uni-app开发过程中,为了实现显示/隐藏密码使用了组建中的input,但是使用uni组件中的input背景不能穿透。所以用原生的input实现了这个功能。
·
在uni-app开发过程中,为了实现显示/隐藏密码使用了组建中的input,但是使用uni组件中的input背景不能穿透。
所以用原生的input实现了这个功能。
一、html部分
<div style="margin-top: 200px;background: #42b983;width: 200px;height: 100px">
<input :type="passwordType" v-model="password" placeholder="请输入账号"/>
<img :src="status" alt="" @click="changeStatus()"/>
</div>
二、js部分
初始化
export default {
data() {
return {
status:require('../src/assets/visible.png'),
passwordType:'password',
password:'',
}
}
}
函数部分
changeStatus(){
this.passwordType = this.passwordType==='password'?'text':'password';
this.status = this.status == require('../src/assets/visible.png')?require('../src/assets/unVisible.png'):require('../src/assets/visible.png');
},
三、效果图
点击眼睛后,就能显示输入的内容了。
这是背景穿透后的样式
更多推荐
已为社区贡献5条内容
所有评论(0)