element-plus ElLoading显示隐藏

原创已于 2023-08-28 11:01:09 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-08-28 11:00:16 首次发布

文章介绍了如何在Vue项目中使用ElementPlus的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
    }
  }
})