项目创建

src/utils/ui/loading.ts

@@ -0,0 +1,38 @@
+import { fourDotsSpinnerSvg } from '@/assets/svg/loading'
+import { ElLoading } from 'element-plus'
+
+const DEFAULT_LOADING_CONFIG = {
+  lock: true,
+  background: 'rgba(0, 0, 0, 0)',
+  svg: fourDotsSpinnerSvg,
+  svgViewBox: '0 0 40 40'
+} as const
+
+interface LoadingInstance {
+  close: () => void
+}
+
+let loadingInstance: LoadingInstance | null = null
+
+export const loadingService = {
+  /**
+   * 显示 loading
+   * @returns 关闭 loading 的函数
+   */
+  showLoading(): () => void {
+    if (!loadingInstance) {
+      loadingInstance = ElLoading.service(DEFAULT_LOADING_CONFIG)
+    }
+    return () => this.hideLoading()
+  },
+
+  /**
+   * 隐藏 loading
+   */
+  hideLoading(): void {
+    if (loadingInstance) {
+      loadingInstance.close()
+      loadingInstance = null
+    }
+  }
+}