增加登录遮罩

Author: piexlmax

web/src/pinia/modules/user.js

@@ -1,12 +1,14 @@
 import { login, getUserInfo, setSelfInfo } from '@/api/user'
 import { jsonInBlacklist } from '@/api/jwt'
 import router from '@/router/index'
-import { ElMessage } from 'element-plus'
+import { ElLoading, ElMessage } from 'element-plus'
 import { defineStore } from 'pinia'
 import { ref, computed, watch } from 'vue'
 import { useRouterStore } from './router'
 
 export const useUserStore = defineStore('user', () => {
+  const loadingInstance = ref(null)
+
   const userInfo = ref({
     uuid: '',
     nickName: '',
@@ -48,6 +50,10 @@ export const useUserStore = defineStore('user', () => {
   }
   /* 登录*/
   const LoginIn = async(loginInfo) => {
+    loadingInstance.value = ElLoading.service({
+      fullscreen: true,
+      text: '登陆中，请稍候...',
+    })
     const res = await login(loginInfo)
     if (res.code === 0) {
       setUserInfo(res.data.user)
@@ -128,6 +134,7 @@ export const useUserStore = defineStore('user', () => {
     sideMode,
     setToken,
     baseColor,
-    activeColor
+    activeColor,
+    loadingInstance
   }
 })

web/src/view/layout/index.vue

@@ -22,8 +22,8 @@
                   <el-row class="pd-0">
                     <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" style="z-index:100">
                       <div class="menu-total" @click="totalCollapse">
-                        <div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right"></div>
-                        <div v-else class="gvaIcon gvaIcon-arrow-double-left"></div>
+                        <div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
+                        <div v-else class="gvaIcon gvaIcon-arrow-double-left" />
                       </div>
                     </el-col>
                     <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
@@ -158,6 +158,9 @@ onMounted(() => {
       emitter.emit('mobile', isMobile.value)
     })()
   }
+  if (userStore.loadingInstance) {
+    userStore.loadingInstance.close()
+  }
 })
 
 const userStore = useUserStore()