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

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

实现效果

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()