- 亲测有效,思路:在密码输入框聚焦时设置文本框只读,并且设置 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>