密码框的交互方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/85273928

密码为空时，不显示眼睛图标。输入密码时出现带斜杠的眼睛图标，鼠标长时间点击在眼睛图标上显示密码，且眼睛上的斜杠消失，松开鼠标密码隐藏，眼睛上出现斜杠。

<div >
          <el-dialog title="重置密码" :visible.sync="resetPasswordVisible" width="490px" @close="closeResetPassword">
          <el-form :rules="rules" ref="passwordForm" :model="passwordForm">
            <el-form-item label="密码"  :label-width="formLabelWidth"  prop="password">
              <el-input id="pwd" v-model.trim="passwordForm.password" type="password" placeholder="请输入长度为10-20位包含数字、字母、特殊字符的密码" >
                <i slot="suffix"
                  v-if="passwordForm.password.length>0"
                  class="el-input__icon el-icon-view el-show"
                  title="长按显示密码"
                  @mousedown="showPassword"
                  @mouseup="closePassword">
                <i v-show="isHidePsd" class="close-line"></i>
                </i>
              </el-input>
            </el-form-item>

            <el-form-item label="开发商ID" :label-width="formLabelWidth"  hidden=true>
              <el-input v-model="passwordForm.devpId" ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="closeResetPassword" class="el-button-reset">取 消</el-button>
              <el-button type="primary" @click="saveResetPassword('passwordForm')" class="el-button-reset">确 定</el-button>
          </div>
          </el-dialog>
      </div>


 data() {
    return {
      rules: {
        password: [
          { required: true, message: '请输入长度为10-20位包含数字、字母、特殊字符的密码', trigger: 'blur' },
          { pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{10,20}$/, message: '请输入长度为10-20位包含数字、字母、特殊字符的密码', trigger: 'blur' },
        ],
      },
      isHidePsd: true, // 隐藏密码
      resetPasswordVisible: false,
      passwordForm: {
        password: '',
        devpId: '',
      },     
  },


  methods: {
    // 显示密码
    showPassword() {
      this.isHidePsd = false;
      document.getElementById('pwd').type = 'text';
    },
    closePassword() {
      this.isHidePsd = true;
      document.getElementById('pwd').type = 'password';
    },
  }

<style scoped lang="less">
  .el-show{
    position: relative;
    &:hover{
      cursor: pointer;
    }
    .close-line{
      position: absolute;
      height: 1px;
      width: 20px;
      top: 19px;
      left: 3px;
      border-top: 1px solid #dcdfe6;
      transform: rotate(45deg);
    }
  }
</style>