在微信小程序里,设置密码输入框。
非常感谢分享。
原文链接:https://blog.csdn.net/weixin_45727040/article/details/106501412
wxml
<view class='parentstyle '>
<view class='centerStyle'>
<input password='{{passwordType}}' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
<image src='{{defaultType? "../../assets/closeye.png": "../../assets/openeye.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
</view>
</view>
wxss
.parentstyle {
display: flex;
align-items: center;
border: 1rpx solid #e0e0e0;
border-radius: 10rpx;
box-shadow: 0 0 5rpx #e0e0e0;
margin: 30rpx 38px;
padding: 20rpx;
}
.parentstyle .imageStyle {
width: 41rpx;
height: 41rpx;
margin-right: 20rpx;
}
.parentstyle .centerStyle {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
}
js
Page({
data: {
defaultType: true,
passwordType: true
},
//defaultType:眼睛状态 passwordType:密码可见与否状态
eyeStatus: function(){
this.data.defaultType= !this.data.defaultType
this.data.passwordType= !this.data.passwordType
this.setData({
defaultType: this.data.defaultType,
passwordType: this.data.passwordType
})
}
})