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