初始版本提交

src/directives/loading.ts

@@ -0,0 +1,39 @@
+import { createLoading } from '/@/components/Loading';
+import type { Directive, App } from 'vue';
+
+const loadingDirective: Directive = {
+  mounted(el, binding) {
+    const tip = el.getAttribute('loading-tip');
+    const background = el.getAttribute('loading-background');
+    const size = el.getAttribute('loading-size');
+    const fullscreen = !!binding.modifiers.fullscreen;
+    const instance = createLoading(
+      {
+        tip,
+        background,
+        size: size || 'large',
+        loading: !!binding.value,
+        absolute: !fullscreen,
+      },
+      fullscreen ? document.body : el,
+    );
+    el.instance = instance;
+  },
+  updated(el, binding) {
+    const instance = el.instance;
+    if (!instance) return;
+    instance.setTip(el.getAttribute('loading-tip'));
+    if (binding.oldValue !== binding.value) {
+      instance.setLoading?.(binding.value && !instance.loading);
+    }
+  },
+  unmounted(el) {
+    el?.instance?.close();
+  },
+};
+
+export function setupLoadingDirective(app: App) {
+  app.directive('loading', loadingDirective);
+}
+
+export default loadingDirective;