密码显示隐藏

<template>
    <div class="changepsd">
        <h2>修改密码</h2>
        <div class="psd-content">
            <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item class="necessary" v-if="oldVisible" label="新密码" prop="pass">
                <el-input class="ipt-width" type="password" v-model="ruleForm2.pass" placeholder="请输入新密码">
                  <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
                    class="el-input__icon iconfont iconbiyan "></i>
                </el-input>
                <span class="redNotice"> *</span>
              </el-form-item>
              <el-form-item class="necessary" v-else label="新密码" prop="pass">
                <el-input class="ipt-width" type="text" v-model="ruleForm2.pass" placeholder="请输入新密码">
                  <i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
                    class="el-input__icon iconfont iconin_zhengyan"></i>
                </el-input>
                <span class="redNotice"> *</span>
              </el-form-item>
                <el-form-item class="necessary" v-if="newVisible" label="确认密码" prop="checkPass">
                <el-input class="ipt-width" type="password" v-model="ruleForm2.checkPass" placeholder="请输入新密码">
                  <i slot="suffix" title="显示密码" @click="changeCheckPass('show')" style="cursor:pointer;"
                    class="el-input__icon iconfont iconbiyan"></i>
                </el-input>
                <span class="redNotice"> *</span>
              </el-form-item>
              <el-form-item v-else label="确认密码" prop="checkPass">
                <el-input class="ipt-width" type="text" v-model="ruleForm2.checkPass" placeholder="请输入新密码">
                  <i slot="suffix" title="隐藏密码" @click="changeCheckPass('hide')" style="cursor:pointer;"
                    class="el-input__icon iconfont iconin_zhengyan"></i>
                </el-input>
                <span class="redNotice"> *</span>
              </el-form-item>
                <p>至少8-128位，包含至少一个数字或字母</p>
                <el-form-item class="necessary">
                    <el-button class="btn" type="primary" @click="submitForm('ruleForm2')">确认修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { update } from "@/api/user"
import { validatePass,validatePass2 } from "@/util/validate";
export default {
    data() {
      let regPass =/[0-9a-zA-Z]{8,128}/
      const validatePass = (rule, value, callback) => {
          if (value === ''|| !regPass.test(value)) {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm2.checkPass !== '') {
              this.$refs.ruleForm2.validateField('checkPass');
            }
            callback();
          }
        };
      const validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm2.pass) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
      return {
        ruleForm2: {
          pass: '',
          checkPass: ''
        },
        oldVisible:true,
        newVisible:true,
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      // 改变密码显示隐藏
      changePass(value) {
        this.oldVisible = !(value === 'show');
      } ,
      changeCheckPass(value){
        this.newVisible = !(value === 'show');
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            update({newPassword:this.ruleForm2.checkPass}).then(res=>{
              if(res.isSuccess){
                this.$message({
                  message: '密码修改成功',
                  type: 'success'
                });
              }
            })
          } else {
            return false;
          }
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.changepsd{
  background: #fff;
  padding: 34px 80px 44px;
  h2{
    font-size:22px;
    line-height:33px;
    color:rgba(33,33,33,1);
  }
  .psd-content{
    width: 400px;
    margin: 33px auto 0;
    p{
      width:250px;
      height:20px;
      font-size:14px;
      margin: -10px 0 34px 118px;
      line-height:20px;
      color:rgba(64,176,209,1);
    }
    .btn{
      margin-left: 90px;
    }
  }
}
</style>