Element-UI组件实现普通登录

一 代码

1 创建登录视图 Login.vue

<template>
    <div class="login">
        <h1>普通登录组件</h1>
        <div class="account">
            <!--属性绑定
            rule-form：绑定表单数据
            rules：绑定表单规则
            @submit：成功提交回调
            @errHandle：失败提交回调
            -->
            <account-login
                    :rule-form="ruleForm"
                    :rules="rules"
                    @submit="submit"
                    @errHandle="errHandle">
            </account-login>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                // 表单数据
                ruleForm: {
                    username: '',
                    password: '',
                },
                // 表单验证规则
                rules: {
                    username: [
                        {
                            require: true,
                            message: '用户名不能为空',
                            triangle: 'blur'
                        },
                        {
                            min: 2,
                            max: 6,
                            message: &