Vue-Element UI 構建登錄頁面 效果圖 新建Vue項目 新建登錄頁面 頁面內容 綁定數據 參數校驗 綁定事件

效果圖

新建Vue項目

vue init webpack  ”項目名稱“

• 引入Element-UI

npm i element-ui -S

在main.js中導入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

• 全局css
  在assets文件下新建css文件夾，新建global.css

/*全局樣式表*/
html,body,#app{
  height: 100%;
  margin: 0;
  padding: 0;
}

在main.js 中導入

import './assets/css/global.css';

新建登錄頁面

新建Login.vue

<template>
    
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

router文件夾下index.js

import Login from '@/components/Login'

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

頁面內容

<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../../assets/logo.png" alt="">
      </div>
      <el-form label-width="0px" class="login_in">
        <el-form-item prop="username">
          <el-input type="text" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" prefix-icon="el-icon-thumb"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary">登錄</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped lang="less">
  .login_container {
    background-color: #42b983;
    height: 100%;
  }

  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
  }

  .btns {
    display: flex;
    justify-content: flex-end;

  }

  .login_in {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
</style>

綁定數據

<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../../assets/logo.png" alt="">
      </div>
      <el-form label-width="0px" class="login_in" ref="loginForm" :model="loginForm"  >
        <el-form-item prop="username">
          <el-input type="text" prefix-icon="el-icon-user" v-model="loginForm.userName"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" prefix-icon="el-icon-thumb" v-model="loginForm.passWord"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary">登錄</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Login",  
        data(){
            return {
                loginForm:{
                    userName:'admin',
                    passWord:'123456'
                }
            }
        }
    }
</script>

• 效果如圖所示
  

參數校驗

<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../../assets/logo.png" alt="">
      </div>
      <el-form label-width="0px" class="login_in" ref="loginForm" :model="loginForm" :rules="rules" >
        <el-form-item prop="userName" >
          <el-input type="text" prefix-icon="el-icon-user" v-model="loginForm.userName"></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input type="password" prefix-icon="el-icon-thumb" v-model="loginForm.passWord"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary">登錄</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                loginForm:{
                    userName:'',
                    passWord:''
                },
                rules:{
                    userName:[
                        { required: true, message: '請輸入用戶名', trigger: 'blur' },
                        { min: 3, max: 8, message: '長度在 3 到 8 個字符', trigger: 'blur' }
                    ],
                    passWord:[
                        { required: true, message: '請輸入活動名稱', trigger: 'blur' },
                        { min: 6, max: 16, message: '長度在 6 到 16 個字符', trigger: 'blur' }
                    ]
                }
            }
        }
    }
</script>

• 效果如圖所示
  
  

綁定事件

登錄

• 給登錄按鈕綁定事件

// 按鈕
  <el-button type="primary" @click="submitForm('loginForm')">登錄</el-button>
// 事件
  submitForm(formName) {
            // 校驗參數
              this.$refs[formName].validate((valid) => {
                  if (valid) {
                        this.$message({
                            type: 'success',
                            message: '登錄'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '參數不合法'
                        });
                        return false;
                    }
                });
            }

重置

// 按鈕
 <el-button @click="resetForm('loginForm')">重置</el-button>
// 事件
 resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$message({
                    type: 'info',
                    message: '已重置'
                });
            }