html5 密码框明文,elementUI的密码框的密文和明文

基于elementui 框架的登录时密码框的明文和密文

登录

1、template

v-model.trim="ruleForm.password"

placeholder="请输入密码"

:type="passw"

clearable

@blur="onBlur"

>

2、script

data(){

return{

icon: "el-input__icon el-icon-view",

passw: "password",

}

},

methods:{

//密码的隐藏和显示

showPass() {

//点击图标是密码隐藏或显示

if (this.passw == "text") {

this.passw = "password";

//更换图标

this.icon = "el-input__icon el-icon-view";

} else {

this.passw = "text";

this.icon = "el-input__icon el-icon-loading";

setTimeout(()=>{

this.icon = "";

},500)

}

},

//密码失焦事件

onBlur(){

this.passw = "password";

this.icon = "el-input__icon el-icon-view";

},

}