vue-element-ui 表單結構
阿新 • • 發佈:2020-07-14
el-form element表單結構
:model="loginForm" 繫結表單物件 :rules="loginFormRules" 繫結表單驗證規則 el-form-item prop="username" prop 表單元件驗證規則 <el-input v-model="loginForm.username" prefix-icon ="iconfont icon-user"></el-input> 輸入框內容<template> <div class="login_container"> <div class="login_box"> <!-- 頭像區域 --> <div class="avatar_box"> <img src="../assets/logo.png" alt=""> </div> <!-- 登入表單區域 --> <el-form ref="loginFormRef" :model="loginForm" :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 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> </template> <script> export default { data(){ return { // 這是登入表單的資料繫結物件 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: 3, max: 15, message: '長度在 3 到 15 個字元', trigger: 'blur' } ] } } }, methods: { // 點選重置按鈕,重置登入表單 , 重置到雙向繫結初始資料 resetLoginForm(){ console.log(this) this.$refs.loginFormRef.resetFields(); }, login(){ this.$refs.loginFormRef.validate(async (valid) => { // 表單登入之前進行預驗證, 返回值validate為true/false, 可傳回調函式 console.log(valid) 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('登入失敗') this.$message.success('登入成功') // 1.1 專案中出了登入之外的其他API介面,必須在登入之後才能訪問 // 1.2 token 只應在當前網站開啟期間生效,所以將 token 儲存在 sessionStorage 中 window.sessionStorage.setItem('token', res.data.token) // 2. 通過程式設計式導航跳轉到後臺主頁,路由地址是 /home this.$router.push('/home') }) } } } </script> <style lang="less" scoped> .login_container{ background-color: #2b4b6b; height: 100%; } .login_box{ width: 450px; height: 300px; background: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box{ height: 130px; width: 130px; border: 1px solid #eeeeee; border-radius: 50%; padding: 10px; position: absolute; left: 50%; box-shadow: 0 0 10px #dddddd; transform: translate(-50%, -50%); background-color: #fff; img{ width: 100%; height: 100%; border-radius: 50%; background-color: #eeeeee; } } } .login_form{ position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; } .btns{ display: flex; justify-content: center; } </style>
注意到prop接每個欄位的驗證規則,v-model接每個欄位的資料
localStorage 和 sessionStorage 屬性允許在瀏覽器中儲存 key/value 對的資料。
sessionStorage 用於臨時儲存同一視窗(或標籤頁)的資料,在關閉視窗或標籤頁之後將會刪除這些資料。