vue+elementui简约登录

一.导入js，css

        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- import Vue before Element -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!-- jquery -->
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

二.主题内容

        <div class="store-login" id="app">
            <!-- 背景  -->
            <div class="bg-login">
                <li v-for="bgimg in bgImages">
                    <img :src="bgimg">
                </li>
                <!--         <li>
                    <img src="./img/bg2.jpg">
                </li>
                <li>
                    <img src="./img/bg4.jpg">
                </li>
                <li>
                    <img src="./img/bg3.jpg">
                </li> -->
            </div>
            <div class="login-s">
                <!-- 登录表单 -->
                <el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
                    <!-- 用户名 -->
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
                    </el-form-item>
                    <!-- 按钮 -->
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="resetLoginForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

三.javascript代码

<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    //数据绑定
                    index: 0,
                    bgImages:[
                        './img/bg1.jpg',
                        './img/bg2.jpg',
                        './img/bg3.jpg',
                        './img/bg4.jpg',
                    ],
                    show: {
                        diplay: 'blok',
                    },
                    loginForm: {
                        username: 'admin',
                        password: '123456'
                    },
                    //表单验证规则
                    loginFormRules: {
                        username: [{
                                required: true,
                                message: '请输入登录名',
                                trigger: 'blur'
                            },
                            {
                                min: 3,
                                max: 10,
                                message: '登录名长度在 3 到 10 个字符',
                                trigger: 'blur'
                            }
                        ],
                        password: [{
                                required: true,
                                message: '请输入密码',
                                trigger: 'blur'
                            },
                            {
                                min: 6,
                                max: 15,
                                message: '密码长度在 6 到 15 个字符',
                                trigger: 'blur'
                            }
                        ]
                    }
                }
            },
            methods: {
                //添加表单重置方法
                resetLoginForm() {
                    //this=>当前组件对象，其中的属性$refs包含了设置的表单ref
                    //   console.log(this)
                    this.$refs.LoginFormRef.resetFields()
                },
                login() {
                    //点击登录的时候先调用validate方法验证表单内容是否有误
                    this.$refs.LoginFormRef.validate(async valid => {
                        console.log(this.loginFormRules)
                        //如果valid参数为true则验证通过
                        if (!valid) {
                            return
                        }

                        //发送请求进行登录
                        const {
                            data: res
                        } = await this.$http.post('login', this.loginForm)
                        //   console.log(res);
                        if (res.meta.status !== 200) {
                            return this.$message.error('登录失败:' + res.meta.msg) //console.log("登录失败:"+res.meta.msg)
                        }

                        this.$message.success('登录成功')
                        console.log(res)
                        //保存token
                        window.sessionStorage.setItem('token', res.data.token)
                        // 导航至/home
                        this.$router.push('/home')
                    })
                },
                changBg() {
                    // alert(11);
                    // const bglogin = document.getElementsByClassName("bg-login");
                    // console.log(bglogin);
                    if (this.index === 0) {
                        this.index = 3;
                    } else {
                        this.index = this.index - 1;
                    }
                    $(".bg-login>li:eq(" + this.index + ")").fadeIn("3000").siblings().fadeOut("3000");
                    console.log(this.index);
                }
            },
            created() {
                this.index = this.bgImages.length
                setInterval(this.changBg, 7000);
            }
        })
    </script>

四.代码样式

<style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body,html
         {
            width: 100%;
            height: 100%;
        }

            .store-login {
                background-color: white;
                height: 100%;
                position: relative;
            }
        
            .bg-login {
                /*background: url("../../public/img/3Dbg01.jpg") no-repeat;*/
                /*background-size: 100% 100%;*/
                position: relative;
                height: 100%;
                opacity: 0.8;
                z-index: 1;
            }
        
            .bg-login > li {
                list-style: none;
                /*display: none;*/
                position: relative;
                width: 100%;
                height: 100%;
                position: absolute;
            }
        
            .bg-login > li > img {
                width: 100%;
                height: 100%;
                opacity: 0.9;
                transition: ease .5s;
            }
        
            .login-s {
                position: absolute;
                width: 350px;
                height: 400px;
                background-color: rgba(0, 0, 0, 0.3);
                top: 35%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 8px;
                z-index: 2;
                box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
                text-align: center;
            }
        
            .login_form {
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 0 30px;
            }
    </style>

五.效果图

 

 预览地址：https://li_shang_shan.gitee.io/vue-element-ui-login/

 

个人学习，内容简略