element-plus ElLoading显示隐藏

在公共文件封装loading加载方法

import { ElLoading } from 'element-plus'
let loadingInstance: any

// loading加载显示
export const startLoading = () => {
  loadingInstance = ElLoading.service({
    lock: true,
    text: '数据正在请求中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}
// loading加载隐藏
export const endLoading = () => {
  loadingInstance.close()
}

某个单文件引用loading示例

<template>
  <div class="demo">
        {{testData}
  </div>
</template>

<script lang="ts">
import { onMounted } from 'vue'
import * as comm from '@/utils/comm'

export default defineComponent({
  setup (props, { emit }) {
  interface User {
	  order: number,
	  name: string
	}
  const testData: Ref<User[]> = ref([])
   onMounted(() => {
	  comm.startLoading()
	   setTimeout(() => {
         comm.endLoading()
         testData.value.push({
         order: 1,
         name: 'hhh'
         })
       }, 1000)
	})
    return {
      testData
    }
  }
})