在公共文件封装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}}
})