1. 效果图

浏览器自动填入的效果图如下：

2. 详细解析

2.1 输入框代码

<el-form-item label="登录名" prop="idNo">
   <el-input v-model="loginForm.idNo" placeholder="请输入邮箱/手机号/登录名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
    <el-input v-model="loginForm.password" placeholder="请输入密码" show-password autocomplete="new-password"></el-input>
</el-form-item>

关键的代码是： autocomplete="new-password"

2.2 参数说明

参数	说明
label-position	label的对齐方式
show-password	是否显示切换密码图标
autocomplete	原生属性，自动补全

• autocomplete="off" 可避免浏览器对输入框的自动填充

---

若autocomplete="off"不起作用时，可修改为autocomplete="new-password"。

---

3. 完整代码

<template>
    <div class = "login-page">
        <div style="padding-bottom: 72px;">
            <img src="../assets/img/login-name.png" />
        </div>
        <div class="login-page-center">
            <el-form :label-position="labelPosition" label-width="80px" :model="loginForm" ref="loginForm" :rules="rules">
                <div style="text-align: center;font-size: 26px;color: #323233;">
                    <span>登录</span>
                </div>
                <el-form-item label="登录名" prop="idNo">
                    <el-input v-model="loginForm.idNo" placeholder="请输入邮箱/手机号/登录名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" show-password autocomplete="new-password"></el-input>
                </el-form-item>
                <el-button class="login-page-button" type = "primary" :loading="confirmLoading" @click = "handleSubmit">登 录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                confirmLoading:false,// 提交按钮状态
                labelPosition: 'top',
                loginForm: {
                    idNo: undefined,
                    password: undefined,
                },
                rules: {
                    idNo: [
                        { required: true, message: '请输入邮箱/手机号/登录名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            };
        },

        methods: {
            handleSubmit() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.confirmLoading = true;
                        this.$api.req("login/do", this.loginForm).then(response => {
                            if (response.data.httpStatus === 200) {
                                this.$message.success(response.data.message);
                                this.$router.push("/wts/answerChamber");
                            }
                        }).catch(() => {
                            this.confirmLoading = false;
                        })
                    }
                });
            },
        }
    }
</script>

<style  lang = "less">
    .login-page{
        width: 100%;
        height: calc(100vh);
        z-index: -10;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background: url(../assets/img/login-bg.png) no-repeat center center fixed;
        /* 让子级垂直居中 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-size: 100% 100%;

        .login-page-center{
            width: 420px;
            height: 393px;
            overflow: hidden;
            background: #ffffff;

            form{
                padding: 44px 50px 56px 50px;

                .login-page-button{
                    margin-top: 42px;
                    width: 320px;
                    height: 38px;
                    background: #4480E6;
                    border-radius: 2px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    font-size: 16px;
                }

                .el-input__inner{
                    height: 40px;
                }

                .el-form-item__label{
                    padding: 17px 0 8px 0!important;
                    line-height: 20px;
                    font-size: 14px;
                    color: #323233;
                }

                .el-form-item{
                    margin-bottom: 0!important;
                }
            }
        }
    }
</style>