AntDesignVue的input组件取消自动填充,亲测有效

417 阅读1分钟
  • 亲测有效,思路:在密码输入框聚焦时设置文本框只读,并且设置 autoComplete="new-password"阻止账号自动填充
  • Element UI组件类似
<template>
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-model-item required prop="username">
            <a-input v-model="model.username" size="large" placeholder="请输入帐户名">
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item required prop="password">
            <a-input
              v-model="model.password"
              size="large"
              type="password"
              autoComplete="new-password"
              placeholder="请输入密码"
              :readOnly="passwordReadonly"
              @focus="passwordBlur"
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
</template>

<script>
export default {
  data() {
    return {
      passwordReadonly: false,
      model: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    passwordBlur() {
      if (this.model.password) {
        return
      }
      // 禁用密码自动填充功能
      this.passwordReadonly = true
      setTimeout(() => {
        this.passwordReadonly = false
      }, 0)
    } 
  }
}
</script>