portal/src/views/management/Login/components/Login.vue

<template>
    <div class="admin-login__loginForm">
        <el-form :model="loginForm" status-icon :rules="loginRules" ref="LoginForm" label-width="100px">
            <el-form-item label="用户名:" prop="username">
                <el-input type="text" v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="admin-login-btns">
                    <el-button class="login-btn__login" type="primary" @click="handleLogin('LoginForm')">登录</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                loginForm:  {
                    username: '',
                    password: '',
                },
                loginRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            handleLogin(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('submit')
                        this.doLogin()
                    } else {
                        console.log('err')
                        return false
                    }
                })
            },
            doLogin() {
                const opt = this.getOption();
                console.log('Options: ', opt)
            },
            getOption() {
                const opt = {
                    username: '',
                    password: ''
                }

                return opt;
            }
        }
    };
</script>

<style lang="scss" scoped>
$text_color: #ccc;
.admin-login {
    &__loginForm {
        ::v-deep .el-form-item__label {
            color: $text_color;
        }
    }

    &-btns {
        .login-btn {
            &__login {
                width: 100%;
            }
        }
    }
}
</style>