自己现在时间比较充裕,最近也想对自己之前的东西一些总结和收纳,帮助自己对于知识的梳理和强化,所以开始写博了。
-----------------------------------------------------------------华丽的分割线------------------------------------------------------------
最近开发了一个小程序的项目,有一个密码输入框一个睁眼闭眼的效果,实质上就是动态改变input的password属性,之前做过,这一次又做一次,所以记录下来,直接上代码。为了便于适用,用的标签也可适用原生小程序写法。
其主要的原理是通过’password=’{{isOldShowPassword}}’'控制password属性的增加和删除
展示实现效果
图标是网上随便找的,自己重新写了一次
wpy页面
html
<template>
<view>
<view class="head_input">
<!-- 输入原来的密码 -->
<view class="old_pwd">
<view class="pwd_left">
<image class="img_input" src="http://img5.imgtn.bdimg.com/it/u=3768748280,1395898927&fm=26&gp=0.jpg" />
<input class="weui-input" @input="oldInputChange" value="{{ oldPwd }}" password='{{isOldShowPassword}}' type="text" placeholder="请输入原密码" />
</view>
<view hidden="{{oldPwdChange}}" class="pwd_right">
<image wx:if="{{isOldShowPassword}}" class="img_show" @tap="oldImgChange(1)" src="http://img2.imgtn.bdimg.com/it/u=204976452,4171432626&fm=26&gp=0.jpg" />
<image wx:if="{{!isOldShowPassword}}" class="keimg_show" @tap="oldImgChange(1)" src="http://img3.imgtn.bdimg.com/it/u=441609135,424878888&fm=26&gp=0.jpg" />
<image class="img_close" @tap="inputClose(1)" src="http://ico.58pic.com/iconset01/Google-Plus-icons/gif/127908.gif" />
</view>
</view>
<!-- 输入新的密码 -->
<view class="newOne_pwd">
<view class="pwd_left">
<image class="img_input" src="http://img5.imgtn.bdimg.com/it/u=3768748280,1395898927&fm=26&gp=0.jpg" />
<input class="weui-input" @input="newInputChange" value="{{ newPwd }}" password='{{isNewShowPassword}}' type="text" placeholder="请输入新的密码" />
</view>
<view hidden="{{newPwdChange}}" class="pwd_right">
<image wx:if="{{isNewShowPassword}}" class="img_show" @tap="oldImgChange(2)" src="http://img2.imgtn.bdimg.com/it/u=204976452,4171432626&fm=26&gp=0.jpg" />
<image wx:if="{{!isNewShowPassword}}" class="keimg_show" @tap="oldImgChange(2)" src="http://img3.imgtn.bdimg.com/it/u=441609135,424878888&fm=26&gp=0.jpg" />
<image class="img_close" @tap="inputClose(2)" src="http://ico.58pic.com/iconset01/Google-Plus-icons/gif/127908.gif" />
</view>
</view>
<!-- 再次输入新密码 -->
<view class="newSure_pwd">
<view class="pwd_left">
<image class="img_input" src="http://img5.imgtn.bdimg.com/it/u=3768748280,1395898927&fm=26&gp=0.jpg" />
<input class="weui-input" @input="newTwiceInputChange" value="{{ newTwicePwd }}" password='{{isNewTwiceShowPassword}}' type="text" placeholder="请再次输入新的密码" />
</view>
<view hidden="{{newTwiceChange}}" class="pwd_right">
<image wx:if="{{isNewTwiceShowPassword}}" class="img_show" @tap="oldImgChange(3)" src="http://img2.imgtn.bdimg.com/it/u=204976452,4171432626&fm=26&gp=0.jpg" />
<image wx:if="{{!isNewTwiceShowPassword}}" class="keimg_show" @tap="oldImgChange(3)" src="http://img3.imgtn.bdimg.com/it/u=441609135,424878888&fm=26&gp=0.jpg" />
<image class="img_close" @tap="inputClose(3)" src="http://ico.58pic.com/iconset01/Google-Plus-icons/gif/127908.gif" />
</view>
</view>
</view>
</view>
</template>
css
<style lang="less" scoped>
.pwd_makeSure_dialog {
height: 188rpx;
line-height: 188rpx;
text-align: center;
font-size: 14px;
}
.head_input {
padding: 0 30rpx;
.old_pwd,
.newOne_pwd,
.newSure_pwd {
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #EEE;
.pwd_left {
display: flex;
align-items: center;
.img_input {
width: 23rpx;
height: 24rpx;
}
input {
padding-left: 15rpx;
margin-left: 17rpx;
font-size: 12px;
}
}
.pwd_right {
align-items: center;
.keimg_show {
padding: 45rpx 0 30rpx;
width: 30rpx;
height: 19rpx;
}
.img_show {
padding: 45rpx 0 30rpx;
width: 32rpx;
height: 14rpx;
}
.img_close {
padding: 50rpx 0 28rpx;
width: 22rpx;
height: 22rpx;
margin-left: 30rpx;
}
}
}
}
</style>
mixins文件夹的js
import wepy from 'wepy'
export default class extends wepy.mixin {
data = {
oldPwd: '',
newPwd: '',
newTwicePwd: '',
// 控制眼睛小图标
oldPwdShow: false,
newPwdShow: false,
newTwiceShow: false,
// 右侧小图标
oldPwdChange: true,
newPwdChange: true,
newTwiceChange: true,
// 控制密码框
isOldShowPassword: true,
isNewShowPassword: true,
isNewTwiceShowPassword: true
}
methods = {
oldInputChange(e) {
console.log(e.detail.value)
if (e.detail.value.trim()) {
this.oldPwdChange = false
this.oldPwd = e.detail.value
} else {
this.oldPwdChange = true
this.oldPwd = ''
}
},
newInputChange(e) {
console.log(e.detail.value)
if (e.detail.value.trim()) {
this.newPwdChange = false
this.newPwd = e.detail.value
} else {
this.newPwdChange = true
this.newPwd = ''
}
},
newTwiceInputChange(e) {
console.log(e.detail.value)
if (e.detail.value.trim()) {
this.newTwiceChange = false
this.newTwicePwd = e.detail.value
} else {
this.newTwiceChange = true
this.newTwicePwd = ''
}
},
// 清空
inputClose(i) {
if (i == 1) {
this.oldPwd = ''
this.oldPwdChange = true
this.isOldShowPassword = true
} else if (i == 2) {
this.newPwd = ''
this.newPwdChange = true
this.isNewShowPassword = true
} else if (i == 3) {
this.newTwicePwd = ''
this.newTwiceChange = true
this.isNewTwiceShowPassword = true
}
},
// 控制密码输入框
oldImgChange(i) {
if (i == 1) {
this.isOldShowPassword = !this.isOldShowPassword;
} else if (i == 2) {
this.isNewShowPassword = !this.isNewShowPassword;
} else if (i == 3) {
this.isNewTwiceShowPassword = !this.isNewTwiceShowPassword;
}
}
}
onShow() {}
onLoad() {}
}
个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。
学海无涯!努力二字,共勉!