禁止浏览器默认填充密码 vue

禁止浏览器默认填充密码会和我的样式冲突 所以禁止

第一种：

通过给表单元素添加 autocomplete="off" 属性，

可以防止浏览器自动填充表单中的账号和密码。可以在 input 标签或整个 form 标签上使用：

<template>
  <a-form>
    <a-form-item label="账号">
      <a-input v-model="username" autocomplete="off" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model="password" type="password" autocomplete="off" />
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  }
};
</script>

为密码输入框动态设置 name 属性

有时仅仅使用 autocomplete="off" 不能完全阻止浏览器自动填充。你还可以为账号和密码的输入框动态设置 name 属性，使浏览器难以识别这些字段。例如：

 getDynamicName(field) {
      // 根据当前时间动态生成name属性，避免浏览器识别
      return `${field}_${Date.now()}`;
    }

第二种

将 input 的 readonly 属性设置为 true，然后在 mounted 钩子中取消 readonly 状态

<template>
  <a-form>
    <a-form-item label="账号">
      <a-input v-model="username" :readonly="isReadonly" @focus="removeReadonly" autocomplete="off" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model="password" type="password" :readonly="isReadonly" @focus="removeReadonly" autocomplete="off" />
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      isReadonly: true
    };
  },
  methods: {
    removeReadonly() {
      this.isReadonly = false;
    }
  }
};
</script>