项目实现|google密码回填的问题

当使用了google左上角的"管理您的密码"的功能，在遇到el-inpuit+type=“password”时候，会出现密码的回填

    <el-form-item label="密码" required prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
    </el-form-item>

这个问题的根本原因是Google浏览器如果检测到你的代码中有text的input和password的input前后连接出现，他就会给你进行自动填充。

解决方案：

网上给了很多，我先挨着试试

1. 设置autocomplete="off"(没有任何效果，依然自动填充)

2. autocomplete="new-password" (不会自动填充，但是会出现记住密码的列表)

3. 使用css的解决方案(但是这个属性很多浏览器都不兼容的，不兼容的浏览器就展示明文了)

   -webkit-text-security 指定要使用的形状来代替文字的显示。
   none 无。
   circle 圆圈。
   disc 圆形。
   square 正方形。
   

      // type="text"
      <el-input type="text" v-model="formData.password" class="no-autofill-pwd"></el-input>
      // css 
     .no-autofill-pwd {
       ::v-deep .el-input__inner {
           -webkit-text-security: disc !important;
       }
   }
   

4. 利用google检测的原理，在前后连接的input加不显示的input (不会自动填充，但是会出现记住密码的列表)

           <el-form-item label="姓名" required prop="name">
               <el-input v-model="formData.name"></el-input>
           </el-form-item>
           <input type="text" name="text" style="position: absolute;left: -10000px;">
           <input type="password" name="password" style="position: absolute;left: -10000px;">
           <el-form-item label="密码" required prop="password">
               <el-input type="password" v-model="formData.password"></el-input>
           </el-form-item>
   

5. 利用readonly属性(不会自动填充，但是会出现记住密码的列表)

   这种方案可以部分处理这个问题，为什么说部分处理，因为我发现点击输入框两下，还是会出现密码列表

           <el-form-item label="密码" required prop="password">
               <el-input
                   type="password"
                   v-model="formData.password"
                   :readonly="readonly"
                   @blur="readonly = true"
                   @click.native="readonly = false"
               ></el-input>
           </el-form-item>
           // data中设置readonly为true
           readonly: true,
   

6. 通过失去焦点，获取焦点来控制(和使用readonly原理一样，出现的bug也一样)

       <el-input
           :type="inputType"
           @focus="this.inputType = 'password'"
           @blur="this.inputType = 'text'"
           autocomplete="new-password"
       />