vue+elementui简约登录

转载

mob604756f19185 2021-05-10 17:14:25

文章标签 vue+elementui 文章分类 JavaScript 前端开发

一.导入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>
                         
                
                
                -->
            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代码

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);
            }
        })    " _ue_custom_node_="true">

四.代码样式

{
            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;
            }
    " _ue_custom_node_="true">