element-ui页面加载动画

element-ui提供了el-loading组件来实现页面加载动画。使用方法如下：

1. 在需要添加加载动画的元素上添加ref属性，例如：

<template>
<div ref="loadingContainer">
<!-- 页面内容 -->
</div>
</template>

2. 在组件中引入el-loading组件，并在mounted钩子函数中使用该组件，例如：

<template>
<div ref="loadingContainer">
<!-- 页面内容 -->
</div>
</template>

<script>
import { Loading } from 'element-ui';

export default {
mounted() {
const loadingInstance = Loading.service({
target: this.$refs.loadingContainer,
fullscreen: false,
text: '加载中...', // 可选，自定义加载文本
spinner: 'el-icon-loading', // 可选，自定义加载图标
background: 'rgba(0, 0, 0, 0.7)' // 可选，自定义遮罩层背景色
});
// 模拟异步请求
setTimeout(() => {
loadingInstance.close();
}, 3000);
}
}
</script>

3. 在mounted钩子函数中使用Loading.service方法创建一个loading实例，并传入需要添加加载动画的元素的ref属性值作为target参数。可以通过text、spinner、background等参数自定义加载文本、加载图标和遮罩层背景色。最后通过loadingInstance.close()方法关闭loading实例。