element-ui 去掉谷歌浏览器el-input组件自动填充账号密码
1.使用element中el-input自带的属性auto-complete(版本二可用),但是值不能按照官网而要改成new-password。
2.使用el-input组件的只读属性(是否)readonly,开始要input框为只读,readonly = “true”。
3.注册聚焦事件focus,控制readonly的属性值(true,false)。
效果图
一、主要代码之el-input
<el-form-item label="密码:">
<el-input
v-model="item.password"
size="small"
show-password
auto-complete="new-password"
:readonly="readonlyFlag"
@focus="handlerIpClick"
></el-input>
</el-form-item>
readonlyFlag: true,
handlerIpClick() {
this.readonlyFlag = false
},
二、主要代码之input
问题:如题,在谷歌浏览器中,有时input标签会自动填充数据,如用户名密码等。。。
解决:给input标签加上autocomplete属性,
如果是type=“text”就加上autocomplete="off"属性,
如果type=“password”,就加上autocomplete="new-password"属性(见下图)
<input
:type="showType"
v-model="item.password"
:autocomplete="showFlag ? 'off' : 'new-password'"
/>
<div @click="showPassword">
<svg-icon v-if="showFlag" iconClass="password-open"></svg-icon>
<svg-icon v-else iconClass="password-close"></svg-icon>
</div>
showFlag: false,
showType: 'password',
showPassword() {
this.showFlag = !this.showFlag
this.showType = this.showFlag ? 'text' : 'password'
},
链接: https://blog.csdn.net/weixin_44191318/article/details/125386427
链接: https://blog.csdn.net/hi1234560/article/details/118487828