解决浏览器自动填充的问题

1、不做任何操作，默认本地自动填充（发版到线上展示为：不自动填充，需要获取焦点手动选择）

2、使用autocomplete属性遇到的几个情况

　　（1）账号密码统一用autocomplete=“on/off”的时候，我自己使用时毫无作用（vue饿了么框架统一效果）

<input type="text" autocomplete="off" name="userName"/>
<input type="password" autocomplete="off" name="password"/>

　　（2）在form表单上直接设置一个autocomplete=“on/off”，我使用时也无效果（vue饿了么框架统一效果）

<form method="post" action="/form" autocomplete="off">
[…]
</form>

　　（3）普通文本框添加 autocomplete="off"，密码输入框添加 autocomplete="new-password"，是可以取消自动填充的，但在单点密码框时还是可以调出之前保存的密码选择的

<input type="text" autocomplete="off" name="userName"/>
<input type="password" autocomplete="new-password" name="password"/>

3、通过js去动态控制的几种情况

　　（1）可以通过动态控制readonly来设置密码自动填充问题，（在手动点击密码框获取焦点的时候可以选择密码）

<input type="text" autocomplete="off" name="userName"/>
<input type="password" :readonly="isFalse" placeholder="密码" @focus="isFalse = false" />

　　（2）和第一个类似，只是在获取焦点后，再点击一下才会出现密码选择

<el-input
    type="password"
    :readonly="password2" //动态控制只读
    @focus="changAttr($event, 'focus')" //获取焦点时的调用
    @blur="changAttr($event, 'blur')"  //失去焦点时的调用
    @input=" //把input事件去掉后，在密码输入后再删除，会自动弹出密码选择
      changAttr($event, 'blur');
      changAttr($event, 'focus');
    "
/>

changAttr (e, type) {
      if (type === 'focus') {
        if (e && Object.prototype.toString.call(e) !== '[object String]') {
          e.stopPropagation()
          e.preventDefault()
        }
        setTimeout(() => {
          this.password2 = false
        }, 100)
      } else {
        if (e && Object.prototype.toString.call(e) !== '[object String]') {
          e.stopPropagation()
        }
        this.password2 = true
      }
    }

　　（3）控制密码提示不再出现的情况（目前应用在修改密码处）

　　　　//里面的方法和（2）中的类似，只是有加新东西，我做成了一个vue指令，可以根据需要写成方法或者直接用，在需要控制的密码输入框添加v-showPass就行

Vue.directive('showPass', { 
    bind(el, binding, vnode, oldVnode) {
        if (el.localName != 'input') {
            el = el.querySelector('input')
        }
        el.addEventListener('input', (e) => {
            if (el.value != '') {
                el.type = "password"
            } else {
                el.type = "text"
                el.readOnly = 'readOnly'
                setTimeout(() => {
                    el.readOnly = false
                }, 100);
            }
        })
        el.addEventListener('mousedown', (e) => { //解决：输入密码后删除再进行点击时密码还是弹出
            if (e) { e.stopPropagation(); e.preventDefault(); }
            if (el.value === "" || el.readOnly) {
                el.blur();
                setTimeout(() => {
                    el.focus();
                }, 0);
            }
            return false;
        })
        el.addEventListener('focus', (e) => {
            if (e) { e.stopPropagation(); e.preventDefault(); }
            setTimeout(() => {
                el.readOnly = false
            }, 100);
        })
        el.addEventListener('blur', (e) => {
            if (e) { e.stopPropagation(); }
            setTimeout(() => {
                el.readOnly = 'readOnly'
            }, 100);
        })
    },
})

目前总结这些，有需要补充的可以私信或者评论上补上

　　

//里面的方法和（2）中的类似，只是有加新东西，我这是做成一个vue指令，可以根据需要写成方法或者直接用，在需要控制的密码输入框添加v-showPass