需求描述
禁用登录的时候提示用户信息,即不允许保存账号密码
问题分析
在el-input中设置属性autocomplete=”off",普通文本可以生效,但是密码框点击后还是会提示用户信息,由于用户信息提示只跟input有关,因此,我们可以通过监听input的行为来,不然其显示,根据测试,在鼠标按下的时候,就会展示用户信息自动填充框供选择,因此,监听的事件要在按下鼠标的时候,即mousedown
事件,在input获得焦点时,先失去焦点,就不会提示用户信息,然后再通过js代码去获取焦点,此时不会触发用户信息框
实现代码
<el-input
autocomplete="new-password"
show-password
placeholder="请输入密码"
v-model="password"
ref="password"
></el-input>
watch: {
password: {
handler() {
if (this.password === '') {
this.$refs.password.$refs.input.blur();
setTimeout(() => {
this.$refs.password.$refs.input.focus();
}, 0);
}
}
}
},
methods: {
offAutoComplete() {
if (this.$refs.password) {
this.$refs.password.$refs.input.onmousedown = (evt) => {
if (this.password === '' && evt) {
evt.preventDefault();
evt.stopPropagation();
}
if (this.password === '') {
this.$refs.password.$refs.input.blur();
setTimeout(() => {
this.$refs.password.$refs.input.focus();
}, 0);
}
return false;
};
}
},
},
mounted() {
this.$nextTick(() => {
this.offAutoComplete()
})
}