记一次Vue去除密码自动填充过程！

最近倒霉公司出了一个需求，要去除浏览器的自动填充密码

项目是 vue3 + element-plus + vite

浏览器版本 100.0

问题如下：

从网上搜到的资料 增加隐藏的密码框、设置readonly属性、focus切换type类型都不管用！

感觉谷歌浏览器是把设置为type=password的所有input都能进行填充了

但是如果输入框有值的话不能填充，本次去除就是依靠这个规则，下面是具体的实现步骤：

html

<el-form-item prop="password" :label="$t('user.password')" :class="{ 'is-required': !dataForm.id }">
  <el-input v-if="passwordVisible" ref="passwordVisible" v-model="dataForm.password" @keydown="passwordtype = 'password'" autocomplete="new-password" :type="passwordtype" :placeholder="$t('user.password')"></el-input>
</el-form-item>
<el-form-item prop="confirmPassword" :label="$t('user.confirmPassword')" :class="{ 'is-required': !dataForm.id }">
  <el-input v-if="confirmPasswordVisible" ref="confirmPasswordVisible" v-model="dataForm.confirmPassword" @keydown="confirmPasswordtype = 'password'" :type="confirmPasswordtype" :placeholder="$t('user.confirmPassword')"></el-input>
</el-form-item>

通过键盘事件去控制input的类型 初始化 type 为 text,当keydown后，改变type为password

data

return reactive({
  username: "",
  password: "",
  passwordtype: "text",
  confirmPasswordtype: "text",
  passwordVisible: true,
  confirmPasswordVisible: true,
  dataForm: {}
})

到现在为止输入密码没有问题了 不会出现弹框

BUT，输入完删除所有密码后，弹框又出现了！！！！

所以给vmodel绑定的值加一个监听事件

watch

watch: {
  "dataForm.password"(newV) {
    if (!newV) {
      this.passwordtype = "text";
      this.reloadPasswordInput("passwordVisible");
    }
  },
  "dataForm.confirmPassword"(newV) {
    if (!newV) {
      this.confirmPasswordtype = "text";
      this.reloadPasswordInput("confirmPasswordVisible");
    }
  }
},

当监听到绑定值为空的时候 首先把类型设置为text，但是会发现没用，只要设置过一次type=passwod，浏览器都会记住，所以楼主就想用卸载组件重新渲染的方式进行对密码框的重置

methods

reloadPasswordInput(key: any) {
  this[key] = false as any;
  this.$nextTick(() => {
    this[key] = true as any;
    this.$nextTick(() => {
      this.$refs[key].focus();
    });
  });
},

设置完成后，会发现弹框不会出现了，但是发现重新渲染的组件没有自动聚焦

于是就又加了一个nextTick 等待组件渲染完毕后调用element的focus()方法;

至此，去除密码填充就全部完成了！