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

},

}

總結

以上是生活随笔為你收集整理的html5 密码框明文,elementUI的密码框的密文和明文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。