密码框默认弹框去除

水国蒹葭夜有霜，月寒山色共苍苍。

浏览器默认密码框自动填充

• 当点击type为password的事件，浏览器默认会弹出记录密码的弹框

去除默认弹框

1. 设置 autocomplete属性

<el-input type="password"
     v-model="form.password"
    auto-complete="new-password"
    >

• 加auto-complete属性，只能避免保存的时候弹出是否保存密码弹框的问题

2. 添加禁止复制粘贴属性

<el-form-item label="新密码" prop="password">
  <el-input v-model="form.password"
      type="password"
      autocomplete="off" clearable placeholder="请输入新密码" 
      @paste.native.capture.prevent="handlePaste"
      ></el-input>
</el-form-item>

3. 添加focus，blur事件和readonly属性

<el-form-item label="新密码" prop="password">
  <el-input v-model="form.password"
      :type="((newPwdReadOnly && form.password) || form.password) ? 'password' : 'text'"
      autocomplete="off" clearable placeholder="请输入新密码" 
      @paste.native.capture.prevent="handlePaste"
      @copy.native.capture.prevent="handleCopy" 
      @focus="newPwdFocus($event)" 
      :readonly="newPwdReadOnly"
      @blur="newPwdBlur($event)" 
      ref="newPwdRef" 
      id="pass"
      ></el-input>
</el-form-item>

<script>
    methods: {
      newPwdFocus(evt) {
            if (evt) {
                evt.stopPropagation();
                evt.preventDefault();
            }
            setTimeout(() => {
                this.newPwdReadOnly = false;
            }, 100);
        },
        newPwdBlur(evt) {
            if (evt) {
                evt.stopPropagation();
            }
                this.newPwdReadOnly = true
        },
    }
</script>

4. 添加监听

watch: {
    "form.password": function () {
        if (this.form.password == "") {
            this.newPwdReadOnly = true;
            this.newPwdFocus(null);
        }
    }