feat(loading): supports custom configuration for v-loading (#2318)

* feat(loading): supports custom conf for v-loading * docs(loading): improve the v-loading instructions
Tencent · Apr 11, 2023 · 4a40a06 · 4a40a06
1 parent a7a9b01
commit 4a40a06
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/loading/_example/directive.vue b/src/loading/_example/directive.vue
@@ -7,6 +7,9 @@
 
     <div v-loading.fullscreen="loading2" class="loading-container">Loading...</div>
     <t-button size="small" :disabled="loading2" @click="handleLoadingFullscreen">支持 fullscreen 修饰符</t-button>
+
+    <div v-loading="loading3" class="loading-container">Loading...</div>
+    <t-button size="small" :disabled="loading2" @click="handleLoadingCustom">支持传递 Object 配置</t-button>
   </t-space>
 </template>
 <script>
@@ -15,6 +18,11 @@ export default {
     return {
       loading1: false,
       loading2: false,
+      loading3: {
+        loading: false,
+        delay: 300,
+        showOverlay: true,
+      },
     };
   },
   methods: {
@@ -32,6 +40,13 @@ export default {
         clearTimeout(timer);
       }, 1000);
     },
+    handleLoadingCustom() {
+      this.loading3 = { ...this.loading3, loading: true };
+      const timer = setTimeout(() => {
+        this.loading3 = { ...this.loading3, loading: false };
+        clearTimeout(timer);
+      }, 1000);
+    },
   },
 };
 </script>

diff --git a/src/loading/directive.ts b/src/loading/directive.ts
@@ -1,4 +1,7 @@
 import type { DirectiveBinding } from 'vue/types/options';
+import isObject from 'lodash/isObject';
+import mapKeys from 'lodash/mapKeys';
+import isEqual from 'lodash/isEqual';
 import { TdLoadingProps } from './type';
 import produceLoading from './plugin';
 
@@ -13,6 +16,12 @@ const createInstance = (el: HTMLElement, binding: DirectiveBinding) => {
     loading: binding.value,
   };
 
+  if (isObject(binding.value)) {
+    mapKeys(binding.value, (value, key) => {
+      options[key] = value;
+    });
+  }
+
   // eslint-disable-next-line no-param-reassign
   el[INSTANCE_KEY] = {
     options,
@@ -29,8 +38,9 @@ const vLoading = {
   update(el: HTMLElement, binding: DirectiveBinding) {
     const instance = el[INSTANCE_KEY];
     const { value, oldValue } = binding;
-    if (!!oldValue !== !!value) {
-      if (value) {
+    if (!isEqual(value, oldValue)) {
+      const loading = value?.loading ?? value;
+      if (loading) {
         createInstance(el, binding);
       } else {
         instance?.instance.hide();

diff --git a/src/loading/loading.md b/src/loading/loading.md
@@ -1,7 +1,7 @@
 :: BASE_DOC ::
 
 ### 指令方式调用
-支持 `v-loading` 指令调用 `Loading`，只需要绑定 `boolean` 值即可，支持 `fullscreen` 和 `inheritColor` 修饰符，分别对应其属性。
+支持 `v-loading` 指令调用 `Loading`，只需要绑定 `boolean` 值即可，支持 `fullscreen` 和 `inheritColor` 修饰符以及 `Object` 形式的自定义配置，分别对应其属性。
 
 {{ directive }}