vue实现输入密码时显示明文,过一秒变为密文
<el-form :model="changePassword" ref="ruleForm" label-width="100px"><el-form-item label="新密码:" prop="password"><el-input@input.native="onInput($event, 'newPassword')"...
·
<el-form :model="changePassword" ref="ruleForm" label-width="100px">
<el-form-item label="新密码:" prop="password">
<el-input
@input.native="onInput($event, 'newPassword')"
type="text"
v-model="newPassword"
maxlength="12"
placeholder="6-12位字符,支持数字、大小写英文" >
</el-input>
</el-form-item>
<el-form-item label="重复新密码:" prop="repeatPassword">
<el-input
@input.native="onInput($event, 'repeatPassword')"
type="text"
maxlength="12"
v-model="repeatPassword"
placeholder="再次输入登录密码">
</el-input>
</el-form-item>
</el-form>
js代码
data () {
return {
verifyData: {},
changePassword: {
step: 1,
type: 'message',
tel: '',
verifyCode: '',
password: '',
newPassword: '',
repeatPassword: ''
},
password: '',
newPassword: '',
repeatPassword: ''
}
},
methods: {
// 监听输入
onInput (e, type) {
if (e.data) {
if (this.changePassword[type].length < 12) {
this.changePassword[type] += e.data
setTimeout(() => {
this[type] = this[type].replace(/./g, '*')
}, 700)
}
} else {
if (this.changePassword[type].length > 0) {
this.changePassword[type] = this.changePassword[type].substring(0, this.changePassword[type].length - 1)
}
}
}
}
也可以使用下面这种
// 监听输入
onInput (e, type) {
if (e.data) {
if (this.changePassword[type].length < 12) {
this.changePassword[type] += e.data
}
} else {
if (this.changePassword[type].length > 0) {
this.changePassword[type] = this.changePassword[type].substring(0, this.changePassword[type].length - 1)
}
}
},
onKeyUp (type) {
this[type] = this[type].replace(/./g, '*')
},
更多推荐
已为社区贡献11条内容
所有评论(0)