VUE3+Element Plus使用ElLoading实现div的loading效果

实现效果

方式一

• 使用element plus loading功能就行。element plus中给的示例是作用在el-table上，但其实作用在div上同样生效。

 <div
              class="main-content"
              v-loading="true"
              :element-loading-spinner="svg"
              element-loading-svg-view-box="-10, -10, 50, 50"
              element-loading-background="rgba(243.9, 244.2, 244.8,0.5)"
              element-loading-text="任务正在执行......"
            ></div>

方式二

1. 第一步：<template></template>中定义ref

在需要loading效果的div上定义ref即可

<template>
	<div ref="ragRef"></div>
</template>

2. 第二步：<script setup lang="ts"></script >加载loading

导入

import { ElLoading } from 'element-plus'

//定义div的ref
let ragRef = ref()
let ragRefInstance = ref()

loading效果加载

ragRefInstance.value = ElLoading.service({
      target: ragRef.value,
      body: true,
      text: 'Loading...',
})

loading效果关闭

ragRefInstance.value.close()