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

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

1、template

    <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model.trim="ruleForm.password"
                placeholder="请输入密码"
                :type="passw"
                clearable
                @blur="onBlur"
              >
                <!-- input中加图标必须要有slot="suffix"属性，不然无法显示图标 -->
                <i slot="suffix" :class="icon" @click="showPass"></i>
              </el-input>
            </el-form-item>
          </el-col>

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