3.處理前端登入事件
阿新 • • 發佈:2020-08-04
在登入按鈕加上點選事件
<el-button type="primary" style="width:100%" @click="submitLogin">登入</el-button>
新增method
methods:{ submitLogin(){ this.$refs.loginForm.validate((valid) => { if(valid){ alert('submit'); }else{ this.$message.error('請輸入所有欄位') return false; } }); } }
Login.vue全部程式碼
<template> <div> <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer"> <h3 class="loginTitle">系統登入</h3> <el-form-item prop="username"> <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="請輸入使用者名稱"></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="請輸入密碼"></el-input> </el-form-item> <el-checkbox class="loginRemember" v-model="checked"></el-checkbox> <el-button type="primary" style="width:100%" @click="submitLogin">登入</el-button> </el-form> </div> </template> <script> export default { name: "Login", data(){ return { loginForm: { username: 'admin', password: '123' }, checked:true, rules: { username: [{required: true, message: '請輸入使用者名稱', trigger: 'blur'}], password: [{required: true, message: '請輸入密碼', trigger: 'blur'}] } } }, methods:{ submitLogin(){ this.$refs.loginForm.validate((valid) => { if(valid){ alert('submit'); }else{ this.$message.error('請輸入所有欄位') return false; } }); } } } </script> <style scoped> .loginContainer{ border-radius: 15px; background-clip: padding-box; margin: 180px auto; width: 350px; padding: 25px 35px 15px 35px; background: #fff; border:1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6; } .loginTitle{ margin:15px auto 40px auto; text-align: center; color:#505458; } .loginRemember{ text-align: left; margin: 0px 0px 25px 0px; } </style>