Add 'enter' event for login & format login.vue

granty1 · granty1 · commit 34d4af7bee7b · 2020-04-26T10:13:50.000+08:00
diff --git a/web/src/view/login/login.vue b/web/src/view/login/login.vue
@@ -3,19 +3,31 @@
     <vue-particle-line></vue-particle-line>
     <el-main class="login-box">
       <h1 class="title-1">
-        <img class="logo" :src="require('@/assets/logo.png')" alt="" srcset="">
+        <img
+          class="logo"
+          :src="require('@/assets/logo.png')"
+          alt=""
+          srcset=""
+        />
       </h1>
-      <el-form :model="loginForm" :rules="rules" ref="loginForm">
+      <el-form :model="loginForm" :rules="rules" ref="loginForm" @keyup.enter.native="submitForm">
         <el-form-item prop="username">
-          <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
+          <el-input
+            placeholder="请输入用户名"
+            v-model="loginForm.username"
+          ></el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input
-            :type="lock==='lock'?'password':'text'"
+            :type="lock === 'lock' ? 'password' : 'text'"
             placeholder="请输入密码"
             v-model="loginForm.password"
           >
-            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+            <i
+              :class="'el-input__icon el-icon-' + lock"
+              @click="changeLock"
+              slot="suffix"
+            ></i>
           </el-input>
         </el-form-item>
         <el-form-item style="position:relative">
@@ -25,7 +37,13 @@
             placeholder="请输入验证码"
             maxlength="10"
           />
-          <img v-if="picPath" :src="path + picPath" alt="请输入验证码" @click="loginVefify()" class="vPic">
+          <img
+            v-if="picPath"
+            :src="path + picPath"
+            alt="请输入验证码"
+            @click="loginVefify()"
+            class="vPic"
+          />
         </el-form-item>
         <el-form-item>
           <el-button @click="submitForm" style="width:100%">登 录</el-button>
@@ -37,79 +55,79 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
-import { captcha } from '@/api/user'
-const path = process.env.VUE_APP_BASE_API
+import { mapActions } from "vuex";
+import { captcha } from "@/api/user";
+const path = process.env.VUE_APP_BASE_API;
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     const checkUsername = (rule, value, callback) => {
       if (value.length < 5 || value.length > 12) {
-        return callback(new Error('请输入正确的用户名'))
+        return callback(new Error("请输入正确的用户名"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const checkPassword = (rule, value, callback) => {
       if (value.length < 6 || value.length > 12) {
-        return callback(new Error('请输入正确的密码'))
+        return callback(new Error("请输入正确的密码"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
 
     return {
-      lock: 'lock',
+      lock: "lock",
       loginForm: {
-        username: '',
-        password: '',
-        captcha:'',
-        captchaId: '',
+        username: "",
+        password: "",
+        captcha: "",
+        captchaId: "",
       },
       rules: {
-        username: [{ validator: checkUsername, trigger: 'blur' }],
-        password: [{ validator: checkPassword, trigger: 'blur' }]
+        username: [{ validator: checkUsername, trigger: "blur" }],
+        password: [{ validator: checkPassword, trigger: "blur" }],
       },
-      path:path,
-      logVerify:'',
-      picPath:''
-    }
+      path: path,
+      logVerify: "",
+      picPath: "",
+    };
   },
   created() {
-    this.loginVefify()
+    this.loginVefify();
   },
   methods: {
-    ...mapActions('user', ['LoginIn']),
+    ...mapActions("user", ["LoginIn"]),
     async login() {
-      await this.LoginIn(this.loginForm)
+      await this.LoginIn(this.loginForm);
     },
     async submitForm() {
-      this.$refs.loginForm.validate(async v => {
+      this.$refs.loginForm.validate(async (v) => {
         if (v) {
-          this.login()
-          this.loginVefify()
+          this.login();
+          this.loginVefify();
         } else {
           this.$message({
-            type: 'error',
-            message: '请正确填写登录信息',
-            showClose: true
-          })
-          this.loginVefify()
-          return false
+            type: "error",
+            message: "请正确填写登录信息",
+            showClose: true,
+          });
+          this.loginVefify();
+          return false;
         }
-      })
+      });
     },
     changeLock() {
-      this.lock === 'lock' ? (this.lock = 'unlock') : (this.lock = 'lock')
+      this.lock === "lock" ? (this.lock = "unlock") : (this.lock = "lock");
     },
     loginVefify() {
-      captcha({}).then(ele=>{
-        this.picPath = ele.data.picPath
-        this.loginForm.captchaId = ele.data.captchaId
-      })
-    }
-  }
-}
+      captcha({}).then((ele) => {
+        this.picPath = ele.data.picPath;
+        this.loginForm.captchaId = ele.data.captchaId;
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -121,16 +139,16 @@ export default {
     position: absolute;
     left: 50%;
     margin-left: -22vw;
-    top:5vh;
-    .logo{
+    top: 5vh;
+    .logo {
       height: 35vh;
       width: 35vh;
     }
   }
-  .vPic{
+  .vPic {
     position: absolute;
     right: 10px;
-    bottom: 0px;   // 适配ie
+    bottom: 0px; // 适配ie
   }
 }
 </style>
