element 密码显示 隐藏

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");
		    },
       }
}