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

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

js 复制代码

    <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前后连接出现，他就会给你进行自动填充。

解决方案：

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

设置autocomplete="off"(没有任何效果，依然自动填充)
autocomplete="new-password" (不会自动填充，但是会出现记住密码的列表)

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

js 复制代码

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

js 复制代码

   // 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;
    }
}

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

js 复制代码

        <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>

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

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

js 复制代码

        <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,

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

js 复制代码

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