feat(directive): ✨ 增加loading指令

Author: AnyFork

eslint.config.ts

@@ -74,7 +74,9 @@ export default defineConfig([
             // TS未使用变量警告
             '@typescript-eslint/no-unused-vars': 'error',
             // Vue未使用组件（质量规则）
-            'vue/no-unused-components': 'warn'
+            'vue/no-unused-components': 'warn',
+            // 关闭从vue导出部分包，例如：@vue/shared
+            'vue/prefer-import-from-vue': 'off'
         }
     },
     // 6. 排除文件（全局生效），全局忽略规则（同时作用于ESLint和Prettier），可以不用单独配置.prettierignore和.eslintignore文件

package.json

@@ -63,6 +63,7 @@
     },
     "dependencies": {
         "@nuxt/ui": "^4.5.1",
+        "@vue/shared": "^3.5.29",
         "@vueuse/core": "^14.2.1",
         "alova": "^3.5.1",
         "tailwindcss": "^4.2.1",

pnpm-lock.yaml

@@ -1,2 +1,2 @@
-@import 'tailwindcss' prefix(anyfork);
+@import 'tailwindcss';
 @import '@nuxt/ui';

src/assets/styles/index.css

@@ -0,0 +1,18 @@
+import type { App, Directive } from 'vue'
+import focus from './modules/focus'
+import loading from './modules/loading/index'
+const directivesList: Record<string, Directive> = {
+    // focus指令
+    focus,
+    //loading指令
+    loading
+}
+const directives = {
+    install: function (app: App<Element>) {
+        Object.keys(directivesList).forEach((key) => {
+            // 注册自定义指令
+            app.directive(key, directivesList[key])
+        })
+    }
+}
+export default directives

src/directive/index.ts

@@ -0,0 +1,11 @@
+import type { Directive } from 'vue'
+
+/**
+ * 自定义focus指令
+ */
+const directive: Directive = {
+    mounted(el: HTMLElement) {
+        el.focus()
+    }
+}
+export default directive

src/directive/modules/focus.ts

@@ -0,0 +1,18 @@
+<template>
+    <div v-if="loading" class="bg-elevated/90 absolute top-0 left-0 z-100000000 flex h-full max-h-screen w-full items-center justify-center">
+        <div class="flex w-40 flex-col items-center justify-center">
+            <div class="text-primary flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity="0.5" />
+                    <path fill="currentColor" d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"><animateTransform attributeName="transform" dur="1s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate" /></path>
+                </svg>
+            </div>
+            <div class="text-primary text-[16px]">{{ loadingText }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import type { LoadingProps } from '../types'
+    const { loadingText, loading } = defineProps<Partial<LoadingProps>>()
+</script>

src/directive/modules/loading/component/Loading.vue

@@ -0,0 +1,29 @@
+import { createVNode, render } from 'vue'
+import Loading from '../component/Loading.vue'
+import type { LoadingProps } from '../types/index'
+
+/**
+ * 创建、更新和销毁 v-loading 的实例
+ */
+export const createLoading = (props: Partial<LoadingProps>, target: HTMLElement) => {
+    const data = reactive({
+        ...props
+    })
+    const Comp = defineComponent({
+        render: () => h(Loading, data)
+    })
+    const vm = createVNode(Comp)
+    const container = document.createElement('div')
+    // 将虚拟节点挂载到容器上
+    render(vm, container)
+    target.appendChild(vm.el as HTMLElement)
+    if (props.fullscreen) {
+        target.classList.add('overflow-y-hidden')
+    } else {
+        target.classList.remove('overflow-y-hidden')
+    }
+    return {
+        update: (newProps: Partial<LoadingProps>) => Object.assign(data, newProps),
+        destroy: () => render(null, container)
+    }
+}

src/directive/modules/loading/hooks/createLoading.ts

@@ -0,0 +1,66 @@
+import { hyphenate } from '@vue/shared'
+import { type Directive, type DirectiveBinding } from 'vue'
+import { createLoading } from './hooks/createLoading'
+
+const INSTANCE_KEY = Symbol('loading')
+
+const getAttributeName = (name: string) => {
+    return `loading-${hyphenate(name)}`
+}
+/**
+ * 定义挂着对象类型
+ */
+export interface loading extends HTMLElement {
+    [INSTANCE_KEY]: ReturnType<typeof createLoading>
+}
+
+// 获取指令传递的参数
+const getProps = (el: loading, binding: DirectiveBinding<boolean>) => {
+    const loadingText = el.getAttribute(getAttributeName('text'))
+    const fullscreen = binding.modifiers.fullscreen
+    return {
+        loadingText: loadingText ?? 'loading',
+        loading: binding.value,
+        fullscreen
+    }
+}
+
+/**
+ * 自定义loading指令
+ */
+const directive: Directive<loading, boolean> = {
+    mounted(el, binding) {
+        if (binding.value) {
+            const props = getProps(el, binding)
+            console.log(props)
+            if (!props.fullscreen) {
+                el.classList.add('relative')
+            }
+            el[INSTANCE_KEY] = createLoading(props, props.fullscreen ? document.body : el)
+        }
+    },
+    updated(el, binding) {
+        if (binding.oldValue !== binding.value) {
+            if (binding.value && !binding.oldValue) {
+                const props = getProps(el, binding)
+                if (!props.fullscreen) {
+                    el.classList.add('relative')
+                }
+                el[INSTANCE_KEY] = createLoading(props, props.fullscreen ? document.body : el)
+            } else if (!binding.value && binding.oldValue) {
+                el[INSTANCE_KEY]?.update(getProps(el, binding))
+            }
+            if (binding.value) {
+                el.classList.remove('overflow-y-auto')
+                el.classList.add('overflow-y-hidden')
+            } else {
+                el.classList.remove('overflow-y-hidden')
+                el.classList.add('overflow-y-auto')
+            }
+        }
+    },
+    unmounted(el) {
+        el[INSTANCE_KEY]?.destroy()
+    }
+}
+export default directive

src/directive/modules/loading/index.ts

@@ -0,0 +1,14 @@
+export interface LoadingProps {
+    /**
+     * 指令值
+     */
+    loading: boolean
+    /**
+     * loading文本
+     */
+    loadingText?: string
+    /**
+     * 是否全屏
+     */
+    fullscreen?: boolean
+}