element-ui 去掉谷歌浏览器el-input组件或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.youkuaiyun.com/weixin_44191318/article/details/125386427
链接: https://blog.youkuaiyun.com/hi1234560/article/details/118487828