提供密码错误弹窗并设计了样式

auto-imports.d.ts

@@ -5,5 +5,6 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
 }

src/components/Login.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-  import {ElForm, ElFormItem} from "element-plus";
+  import {ElForm, ElFormItem } from "element-plus";
   import { ref, computed } from 'vue';
   import {router} from '../router'
   import {userLogin} from "../api/user.ts";
 
+
   // 输入框值
   const tel = ref('')
   const password = ref('')
@@ -47,6 +48,25 @@
           router.push({ path: "/home" })
         })
         .catch(e => {
+
+          ElMessageBox.alert(
+              e.message,
+              '错误提示',
+              {
+                customClass: "customDialog",
+                confirmButtonText: '好的',
+                type: "error",
+                showClose: false,
+                roundButton: true,
+                center: true
+              }
+          ).then(() => {
+
+            // 清空用户密码
+            password.value = ''
+          })
+
+
           console.log(e.message)
         })
   }
@@ -125,6 +145,14 @@
   </div>
 </template>
 
+<style>
+
+.customDialog {
+  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5
+}
+
+</style>
+
 <style scoped>
 
 </style>