基于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";

},

}