Element-UI组件实现普通登录

左手的ㄟ右手 2021-07-24 14:09 344阅读 0赞

# 一 代码 #

1 创建登录视图 Login.vue

<template>
        <div class="login">
            <h1>普通登录组件</h1>
            <div class="account">
                
                <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: '用户名在2到6字符之间',
                                triangle: 'blur'
                            }
                        ],
                        password: [
                            {
                                require: true,
                                message: '密码不能为空',
                                triangle: 'blur'
                            },
                            {
                                min: 6,
                                max: 15,
                                message: '密码在6到15字符之间',
                                triangle: 'blur'
                            }
                        ]
                    }
                }
            },
            methods:{
                // 成功提交的回调
                submit(){
                    this.$message.success('提交成功')
                },
                // 失败提交的回调
                errHandle(){
                    this.$message.error('表单提交有误，请检查')
                }
            }
        }
    </script>
    
    <style scoped>
        .login {
            margin-top: 30px;
            margin-left: 30px;
        }
    
        .account {
            width: 500px;
        }
    </style>

2 配置登录路由 index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/backTopOne',
            name: 'backTopOne',
            component: () => import('../views/BackTopOne')
        },
        {
            path: '/backTopTwo',
            name: 'backTopTwo',
            component: () => import('../views/BackTopTwo')
        },
        // 配置普通登录路由
        {
            path: '/login',
            name: 'login',
            component: () => import('../views/Login')
        },
    ]
    
    const router = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes
    })
    
    export default router

3 主页面配置导航 Home.vue

<template>
        <div>
            <el-button type="primary" @click="goTo('/backTopOne')">去往页面1</el-button>
            <el-button type="primary" @click="goTo('/backTopTwo')">去往页面2</el-button>
            
            <el-button type="primary" @click="goTo('/login')">去往登录页</el-button>
        </div>
    </template>
    <script>
        export default {
            name: 'Home',
            components: {},
            methods: {
                /*页面跳转*/
                goTo(path) {
                    this.$router.push(path)
                }
            }
        }
    </script>

4 创建AccountLogin.vue普通用户登录组件

<template>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="username">
                    
                    <el-input placeholder="请输入用户名"
                              v-model="ruleForm.username">
                        <i slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    
                    <el-input placeholder="请输入密码"
                              v-model="ruleForm.password"
                              show-password>
                        <i slot="prefix" class="el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            @click="login"
                            type="primary"
                            style="width: 100%">登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
    
    
    <script>
        export default {
            name: "AccountLogin",
            props: {
                ruleForm: {
                    type: Object,
                    require: true
                },
                rules: {
                    type: Object,
                    require: true
                }
            },
            methods: {
                login() {
                    // 登录前会先验证数据是否符合规则
                    this.$refs.ruleForm.validate((valid) => {
                        // 验证成功事件
                        if (valid) {
                            this.$emit("submit")
                        } else { // 验证失败事件
                            this.$emit("errHandle")
                        }
                    })
                }
            }
        };
    </script>

5 注册全局组件index.js

// 导入组件
    import Vue from "vue"
    import BackTop from "../components/backTop/BackTop"
    import AccountLogin from "../components/accountLogin/AccountLogin";
    /* 注册全局组件 */
    Vue.component('backTop', BackTop)
    Vue.component('accountLogin', AccountLogin)

# 二 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 三 开源参考 #

[https://gitee.com/cakin24/ele-components][https_gitee.com_cakin24_ele-components]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/e30441f4918542f9ae44e40d2c4eb7c3.png
[https_gitee.com_cakin24_ele-components]: https://gitee.com/cakin24/ele-components