element 密碼顯示 隱藏

點擊密碼顯示隱藏切換,驗證密碼是否正確
主要使用elment 組件實現

通過改變 type 類型實現
type = password 密碼隱藏
type = " " 爲空時 密碼顯示爲輸入內容

html

             <el-form-item  prop="user.password">
                <el-input
                  v-model="formData.user.password"
                  :type="pwdType"
                  prefix-icon="el-icon-lock"
                  placeholder="請輸入密碼"
                  autocomplete="new-password"
                >
                  <i slot="suffix" class="el-icon-view" @click="showPwd"></i>
                </el-input>
              </el-form-item>   
export  default{
      data(){
             pwdType:"password"
      }
       methods:{
           showPwd() {
			      this.pwdType === "password" ? (this.pwdType = "") : (this.pwdType = "password");
			      let e = document.getElementsByClassName("el-icon-view")[0];
			      this.pwdType == ""? e.setAttribute("style", "color: #c0c4cc") : e.setAttribute("style", "color: #409EFF");
		    },
       }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章