Discount Watches: vue+elementui简约登录

2020-12-10

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>     <img src="./img/bg1.jpg">    </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: 3,     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() {    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>

五.效果图

预览地址：

个人学习，内容简略

原文转载：http://www.shaoqun.com/a/498547.html

yeepay：https://www.ikjzd.com/w/2574

凹凸曼：https://www.ikjzd.com/w/1392

tm商标：https://www.ikjzd.com/w/1069

一.导入js，css<linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><scriptsrc="http
薇美铺：薇美铺
kk馆：kk馆
亚马逊新品上线分阶段广告投放策略：亚马逊新品上线分阶段广告投放策略
香港哪个海滩好玩一点？：香港哪个海滩好玩一点？
线上广交会启示录：云会展风已来新贸易待加速：线上广交会启示录：云会展风已来新贸易待加速

Discount Watches