el-input密码输入框不显示浏览的记住密码

1.问题描述

产品经理提出需求，打开浏览器的密码自动保存功能，然后登录系统，点击修改密码，输入框获取焦点时会弹出浏览器记住的一系列密码，产品提出希望不弹出

2.解决思路

1.把密码框的 type 定义为 text ，这样浏览器就无法正确自动识别 密码

2.修改输入框的文字样式， 把内容替换成 圆点 ●

3.给输入框右侧小眼睛手动绑定事件 ，控制密码的显示隐藏

3.代码演示

<el-input v-model="password" type="text" class="pwd">
  <i slot="suffix" class="el-icon-view" click="hiddenPwd"></i>
</el-input>

// 控制密码的显示与隐藏
hiddenPwd() {
  this.showPwd = !this.showPwd // 默认为false
  if (this.showPwd) {
    document.getElementsByClassName('pwd')[0].style.webkitTextSecurity = 'none'
  } else {
    document.getElementsByClassName('pwd')[0].style.webkitTextSecurity = 'disc'
  }
}

.pwd {
  -webkit-text-security: disc;
}
/deep/.el-input__suffix {
  -webkit-text-security: none;
}