From ee0cc94249ced328ba8da7d2b3bbf7ad17cc7c6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sun, 12 Sep 2021 18:33:24 +0800
Subject: [PATCH] fix(components): rename loading directive instance name
 (#3336)

---
 packages/components/loading/src/directive.ts | 23 +++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/components/loading/src/directive.ts b/packages/components/loading/src/directive.ts
index 29504f7884..cfd5e5f9af 100644
--- a/packages/components/loading/src/directive.ts
+++ b/packages/components/loading/src/directive.ts
@@ -1,8 +1,15 @@
 import Loading from './index'
 
 import type { DirectiveBinding } from 'vue'
+import type { ILoadingInstance } from './loading.type'
 
-const createInstance = (el: HTMLElement, binding: DirectiveBinding) => {
+const INSTANCE_NAME = 'ElLoading'
+
+export interface ElementLoading extends HTMLElement {
+  [INSTANCE_NAME]?: ILoadingInstance
+}
+
+const createInstance = (el: ElementLoading, binding: DirectiveBinding) => {
   const textExr = el.getAttribute('element-loading-text')
   const spinnerExr = el.getAttribute('element-loading-spinner')
   const svgExr = el.getAttribute('element-loading-svg')
@@ -10,7 +17,7 @@ const createInstance = (el: HTMLElement, binding: DirectiveBinding) => {
   const backgroundExr = el.getAttribute('element-loading-background')
   const customClassExr = el.getAttribute('element-loading-custom-class')
   const vm = binding.instance
-  ;(el as any).instance = Loading({
+  el[INSTANCE_NAME] = Loading({
     text: (vm && vm[textExr]) || textExr,
     svg: (vm && vm[svgExr]) || svgExr,
     svgViewBox: (vm && vm[svgViewBoxExr]) || svgViewBoxExr,
@@ -26,23 +33,23 @@ const createInstance = (el: HTMLElement, binding: DirectiveBinding) => {
 }
 
 const vLoading = {
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
+  mounted(el: ElementLoading, binding: DirectiveBinding) {
     if (!!binding.value) {
       createInstance(el, binding)
     }
   },
-  updated(el: HTMLElement, binding: DirectiveBinding) {
-    const instance = (el as any).instance
+  updated(el: ElementLoading, binding: DirectiveBinding) {
+    const instance = el[INSTANCE_NAME]
     if (binding.oldValue !== binding.value) {
       if (binding.value) {
         createInstance(el, binding)
       } else {
-        instance.close()
+        instance?.close()
       }
     }
   },
-  unmounted(el: HTMLElement) {
-    ;(el as any)?.instance?.close()
+  unmounted(el: ElementLoading) {
+    el[INSTANCE_NAME]?.close()
   },
 }