究极禁用浏览器的自动保存密码提示功能

直接上干货

网上很多文章说使用autoComplete=“off”、使用new-password、动态密码域……现在统统都不行了! 本片文章思路主要是模仿password的输入框

<template>
  <div class="main">
    <h3 style="margin:0 0 30px 0;text-align: center;">登录不保存密码</h3>
    <el-form label-position="left" ref="form" :rules="rules" label-width="70px" :model="form">
      <el-form-item label="用户名" prop="name">
        <el-input placeholder="请输入用户名" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <div class="pass-box">
          <div class="simulation-pass-box" v-show="!showpass||form.pass.length === 0">
            <span class="remind" v-show="form.pass.length === 0 && !focus"
              >请输入密码</span>
            <span :class="focus?'pass':''" v-show="form.pass.length !== 0">{{ "●●●●●●●●●●●●●●●●●●●●●●●●●●●".substr(0,form.pass.length) }}</span>
          </div>
          <el-input
            v-model="form.pass"
            @keydown.native="keydown"
            @focus="focus = true"
            @blur="focus = false"
            class="formPass"
          ></el-input>
          <i class="el-icon-view" :style="{color:showpass?'#409EFF':'#aaa'}" @click="showpass=!showpass"></i>
        </div>
      </el-form-item>
    </el-form>
    <el-button type="primary" size="medium" plain class="button" @click="submitForm('form')">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        pass: "",
      },
      focus: false,
      showpass:false,
      rules: {
          name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          pass: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    }
    }
  },
  methods: {
    keydown(e) {
      if (e.ctrlKey||e.metaKey) {
        e.preventDefault();
        return false;
      }
    },
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  },
};
</script>

<style scoped lang="scss">
.main {
  width: 300px;
  padding: 40px 30px 80px;
    margin: 100px auto;
    border: 1px solid #ecf5ff;
    border-radius: 5px;
    position: relative;
  .pass-box {
    position: relative;
    .simulation-pass-box {
      width: calc(100% - 4px);
      height: 36px;
      box-sizing: border-box;
      background: #fff;
      position: absolute;
      left: 2px;
      top: 2px;
      padding: 0 15px;
      text-align: left;
      pointer-events: none;
      z-index: 10;
      .remind {
        color: #ccced5;
      }
      .pass {
        &::after {
          content: "丨";
          animation: cursorImg 1s infinite steps(1, start);
          @keyframes cursorImg {
            0%,
            100% {
              opacity: 0;
            }
            50% {
              opacity: 1;
            }
          }
        }
      }
    }
  }
  .button{
    position: absolute;
    right: 30px;
    bottom: 30px;
  }
  .el-icon-view{
    cursor: pointer;
    position: absolute;
    top: 13px;
    right: 10px;
    color: #aaa;
    z-index: 10;
  }
}
</style>