vue typescript 全局 封装加载动画

引入elemnt ui 组件

定义好两个方法，进行加载动画

import { Loading } from 'element-ui';
let loadingInstance: any;
function show(text = '玩命加载中···'): void {
  loadingInstance = Loading.service({ text: text });
}
function hide(): void {
  loadingInstance.close();
}

export default {
  show,
  hide,
};

创建一个.d.ts文件

说明方法的属性

import Vue from 'vue';
/** Options used in Loading service */
export interface Cloading {
  /** Show a success message */
  show(text?: string): void;

  /** Show a success message with options */
  hide(): void;
}
declare module 'vue/types/vue' {
  interface Vue {
    $load: Cloading;
  }
}

目录结构

在main.ts里面

在组件里使用

this.$load.show()
this.$load.hide()