登陆页面添加回车事件

src/views/system/login.vue

@@ -3,17 +3,19 @@
     <div class="box">
       <h1>{{ systemTitle }}</h1>
       <el-form class="form">
-        <el-input size="large" v-model="form.codeRs" placeholder="用户名" type="text" maxlength="50">
+        <el-input size="large" v-model="form.codeRs" placeholder="用户名" @keyup.enter="submit" type="text" maxlength="50">
           <template #prepend>
             <i class="sfont system-xingmingyonghumingnicheng"></i>
           </template>
         </el-input>
-        <el-input size="large" ref="password" v-model="form.password" :type="passwordType" placeholder="密码" codeRs="password" maxlength="50">
+        <el-input size="large" ref="password" v-model="form.password" @keyup.enter="submit" :type="passwordType"
+                  placeholder="密码" codeRs="password" maxlength="50">
           <template #prepend>
             <i class="sfont system-mima"></i>
           </template>
           <template #append>
-            <i class="sfont password-icon" :class="passwordType ? 'system-yanjing-guan' : 'system-yanjing'" @click="passwordTypeChange"></i>
+            <i class="sfont password-icon" :class="passwordType ? 'system-yanjing-guan' : 'system-yanjing'"
+               @click="passwordTypeChange"></i>
           </template>
         </el-input>
         <el-button type="primary" @click="submit" style="width: 100%" size="medium">登录</el-button>
@@ -23,12 +25,13 @@
 </template>
 
 <script>
-import { systemTitle } from '@/config'
-import { defineComponent, ref, reactive } from 'vue'
-import { useStore } from 'vuex'
-import { useRouter, useRoute } from 'vue-router'
-import { addRoutes } from '@/router'
-import { ElMessage } from 'element-plus'
+import {systemTitle} from '@/config'
+import {defineComponent, ref, reactive} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {addRoutes} from '@/router'
+import {ElMessage} from 'element-plus'
+
 export default defineComponent({
   setup() {
     const store = useStore()
@@ -96,6 +99,7 @@ export default defineComponent({
   width: 100vw;
   height: 100vh;
   background-color: #eef0f3;
+
   .box {
     width: 500px;
     position: absolute;
@@ -107,21 +111,26 @@ export default defineComponent({
     height: 440px;
     overflow: hidden;
     box-shadow: 0 6px 20px 5px rgba(152, 152, 152, 0.1), 0 16px 24px 2px rgba(117, 117, 117, 0.14);
+
     h1 {
       margin-top: 80px;
       text-align: center;
     }
+
     .form {
       width: 80%;
       margin: 50px auto 15px;
+
       .el-input {
         margin-bottom: 20px;
       }
+
       .password-icon {
         cursor: pointer;
         color: #409eff;
       }
     }
+
     .fixed-top-right {
       position: absolute;
       top: 10px;
@@ -129,6 +138,7 @@ export default defineComponent({
     }
   }
 }
+
 @media screen and (max-width: 750px) {
   .container .box {
     width: 100vw;
@@ -141,9 +151,11 @@ export default defineComponent({
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     h1 {
       margin-top: 0;
     }
+
     .form {
     }
   }