新增按钮loading状态

src/app-register.ts

@@ -104,6 +104,7 @@ import AppMapPosition from './components/app-map-position/app-map-position.vue';
 import AppSortBar from './components/app-sort-bar/app-sort-bar.vue';
 import AppAfterTime from './components/app-after-time/app-after-time.vue';
 import AppInputIp from './components/app-input-ip/app-input-ip.vue';
+import Loadding  from  './directive/loadding/loadding';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -223,5 +224,6 @@ export const AppComponents = {
         v.component('app-sort-bar', AppSortBar);
         v.component('app-after-time', AppAfterTime);
         v.component('app-input-ip', AppInputIp);
+        v.directive('loading',Loadding);
     },
 };
\ No newline at end of file

src/directive/loadding/loadding.ts

+import { Http } from '@/utils';
+import { Subscription } from 'rxjs';
+
+/**
+ * 按钮loadding状态服务
+ *
+ * @export
+ * @class LoaddingService
+ */
+export class LoaddingService {
+
+    /**
+     * 单例变量声明
+     *
+     * @private
+     * @static
+     * @type {LoaddingService}
+     * @memberof LoaddingService
+     */
+    private static loaddingService: LoaddingService;
+
+    /**
+     * loadding状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof LoaddingService
+     */
+    public loaddingStateEvent: Subscription | undefined;
+
+    /**
+     * 获取 LoaddingService 单例对象
+     *
+     * @static
+     * @returns {LoaddingService}
+     * @memberof LoaddingService
+     */
+    public static getInstance(): LoaddingService {
+        if (!LoaddingService.loaddingService) {
+            LoaddingService.loaddingService = new LoaddingService();
+        }
+        return this.loaddingService;
+    }
+
+    /**
+     * 初始化指令所绑定的元素状态
+     *
+     * @param {any} el 指令所绑定的元素
+     * @param {any} binding 指令附加参数
+     * @memberof  LoaddingService
+     */
+    public initElement(el:any, binding:any){
+        if(binding && binding.arg){
+            // 工具栏按钮
+            if(Object.is(binding.arg,'i-button')){
+                if(el.getElementsByTagName('i') && el.getElementsByTagName('i').length >0){
+                    let iconElement:any = el.getElementsByTagName('i')[0];
+                    iconElement.setAttribute('ownclassname',iconElement.className);
+                } 
+            }
+        }
+    }
+
+    /**
+     * 设置loadding状态
+     *
+     * @param {any} el 指令所绑定的元素
+     * @param {any} binding 指令附加参数
+     * @memberof  LoaddingService
+     */
+    public setLoadState(el:any, binding:any){
+        this.loaddingStateEvent = Http.getInstance().getNotifyObject().subscribe((result:any) =>{
+            if(result && result.action && Object.is(result.action,'setloadstate')){
+                if(result && result.state){
+                    this.addLoadState(el,binding);
+                }else{
+                    this.removeLoadState(el,binding);
+                }
+            }
+        })
+        
+    }
+
+    /**
+     * 添加loadding状态
+     *
+     * @param {any} el 指令所绑定的元素
+     * @param {any} binding 指令附加参数
+     * @memberof  LoaddingService
+     */
+    public addLoadState(el:any, binding:any){
+        if(binding && binding.arg){
+            el.style.pointerEvents = 'none';
+            // 工具栏按钮
+            if(Object.is(binding.arg,'i-button')){
+                if(el.getElementsByTagName('i') && el.getElementsByTagName('i').length >0){
+                    let iconElement:any = el.getElementsByTagName('i')[0];
+                    iconElement.className = "el-icon-loading";
+                }
+            }
+        }
+    }
+
+    /**
+     * 移除loadding状态
+     *
+     * @param {any} el 指令所绑定的元素
+     * @param {any} binding 指令附加参数
+     * @memberof  LoaddingService
+     */
+    public removeLoadState(el:any, binding:any){
+        if(binding && binding.arg){
+            el.style.pointerEvents = '';
+            // 工具栏按钮
+            if(Object.is(binding.arg,'i-button')){
+                if(el.getElementsByTagName('i') && el.getElementsByTagName('i').length >0){
+                    let iconElement:any = el.getElementsByTagName('i')[0];
+                    iconElement.className = iconElement.getAttribute('ownclassname');
+                }
+            }
+        }
+    }
+
+    /**
+     * 清除资源（取消订阅）
+     *
+     * @param {any} el 指令所绑定的元素
+     * @param {any} binding 指令附加参数
+     * @memberof  LoaddingService
+     */
+    public clearResource(el:any, binding:any){
+        if(this.loaddingStateEvent){
+            this.loaddingStateEvent.unsubscribe();
+        }
+    }
+   
+
+}
+export  default {
+    bind(el:any, binding:any) {
+        LoaddingService.getInstance().initElement(el, binding);
+    },
+    inserted(el:any, binding:any) {
+        LoaddingService.getInstance().setLoadState(el, binding);
+    },
+    unbind(el:any, binding:any) {
+        LoaddingService.getInstance().clearResource(el,binding);
+    }
+}
\ No newline at end of file

src/utils/http/http.ts

@@ -2,6 +2,8 @@ import axios from 'axios';
 import { Loading } from 'element-ui';
 import { ElLoadingComponent } from 'element-ui/types/loading';
 import qs from 'qs';
+import { Subject } from 'rxjs';
+
 /**
  * Http net 对象
  * 调用 getInstance() 获取实例
@@ -10,20 +12,6 @@ import qs from 'qs';
  */
 export class Http {
 
-    /**
-     * 获取 Http 单例对象
-     *
-     * @static
-     * @returns {Http}
-     * @memberof Http
-     */
-    public static getInstance(): Http {
-        if (!Http.Http) {
-            Http.Http = new Http();
-        }
-        return this.Http;
-    }
-
     /**
      * 单例变量声明
      *
@@ -42,6 +30,28 @@ export class Http {
      */
     private loadingCount: number = 0;
 
+    /**
+     * 数据传递对象
+     *
+     * @type {Subject}
+     * @memberof Http
+     */
+    private subject:Subject<any> = new Subject<any>();
+
+    /**
+     * 获取 Http 单例对象
+     *
+     * @static
+     * @returns {Http}
+     * @memberof Http
+     */
+    public static getInstance(): Http {
+        if (!Http.Http) {
+            Http.Http = new Http();
+        }
+        return this.Http;
+    }
+
     /**
      * load状态管理器
      *
@@ -227,6 +237,7 @@ export class Http {
                 body: true,
                 fullscreen: true,
             });
+            this.notifyLoadState(true);
         }
         this.loadingCount++;
     }
@@ -244,6 +255,7 @@ export class Http {
         setTimeout(() => {
             if (this.loadingCount === 0) {
                 this.elLoadingComponent.close();
+                this.notifyLoadState(false);
             }
         }, 500);
     }
@@ -265,4 +277,24 @@ export class Http {
         return data;
     }
 
+    /**
+     * 获取通知对象
+     * 
+     * @public
+     * @memberof Http
+     */
+    public  getNotifyObject(){
+        return this.subject;
+    }
+
+    /**
+     * 通知loadding状态
+     * 
+     * @private
+     * @memberof Http
+     */
+    private notifyLoadState(loadingState:boolean){
+        this.subject.next({action:'setloadstate',state:loadingState});
+    }
+
 }
\ No newline at end of file