当前位置：首页 > news >正文

Element用法---Loading 加载

news 2025/8/13 11:08:11

仅供参考

文章目录

一、加载动画
二、Loading 组件
- 1、指令调用 Loading
- 2、服务调用 Loading

一、加载动画

当我们打开某个页面时，如果需要加载的数据很多或者网络很差，页面加载就会非常缓慢，中间可能会很长时间显示空白，那么就需要加载动画进行一个过渡，既可以起到一个提示的作用，也可以增加用户体验

在这里插入图片描述

二、Loading 组件

Element 的 Loading 组件可以很好的实现一个动态加载动画

Element Plus 提供了两种调用 Loading 的方法：指令和服务

1、指令调用 Loading

假如现在有一个表格需要渲染，但是表格加载数据需要时间，需要在加载数据的时候，只在表格内显示加载动画，而不是整个界面显示加载，此时使用指令调用 Loading 更为方便

指令名称： v-loading

<template><div class="table-container"><el-table v-loading="loading":data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template><script lang="ts" setup>
import { ref } from 'vue'const loading = ref(true)const tableData = ref([{date: '2016-05-02',name: 'John Smith',address: 'No.1518,  Jinshajiang Road, Putuo District',},{date: '2016-05-04',name: 'John Smith',address: 'No.1518,  Jinshajiang Road, Putuo District',},{date: '2016-05-01',name: 'John Smith',address: 'No.1518,  Jinshajiang Road, Putuo District',},
]) // 你的数据
</script>//当确保表格数据加载完成后，将 loading 的值改为 false 即可取消加载动画

实现的效果如下：
在这里插入图片描述
所以，你想要在哪个盒子里面添加加载动画，就给哪个盒子添加 v-loading 指令

加载的同时显示文案：element-loading-text

<template><div class="table-container"><el-table v-loading="loading"element-loading-text="拼命加载中":data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template>

在这里插入图片描述

自定义加载图标：element-loading-spinner

<template><div class="table-container"><el-table v-loading="loading"element-loading-text="拼命加载中":element-loading-spinner="svg":data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template><script lang="ts" setup>
import { ref } from 'vue'const loading = ref(true)const svg = `<path class="path" d="M 30 15L 28 17M 25.61 25.61A 15 15, 0, 0, 1, 15 30A 15 15, 0, 1, 1, 27.99 7.5L 15 15" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`

在这里插入图片描述

自定义遮罩层颜色：element-loading-background

<template><div class="table-container"><el-table v-loading="loading"element-loading-text="拼命加载中"element-loading-background="black":data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template>

在这里插入图片描述

自定义类名：element-loading-custom-class

/* 自定义的样式会作用于加载遮罩层 */
.my-custom-loading {background-color: rgba(0, 0, 0, 0.5); /* 修改遮罩背景色 */
}/* 自定义加载动画 */
.my-custom-loading .el-loading-spinner {/* 修改spinner容器样式 */
}.my-custom-loading .el-loading-spinner .circular {/* 修改旋转动画样式 */
}.my-custom-loading .el-loading-text {/* 修改加载文字样式 */color: #ff0000;
}

2、服务调用 Loading

服务调用 Loading 更偏向于全屏显示加载动画

import { ElLoading } from 'element-plus'
const loading = ElLoading.service({text: '拼命加载中'
})
setTimeout(() => {loading.close() // 关闭加载
}, 2000)

在这里插入图片描述

通过修改 service 中的字段也可以实现自定义加载效果：

const loading = ElLoading.service({target: '',   //Loading 需要覆盖的 DOM 节点,默认是 bodylock: true, //是否在加载期间锁定屏幕交互,如滚动屏幕等fullscreen: true,   //是否全屏显示text: '拼命加载中',  //加载图标下方的加载文案background: 'black',  //遮罩背景色customClass: '',      // Loading 的自定义类名beforeClose: ()=>true,   //Loading 关闭之前执行的函数,返回值为布尔型closed: ()=>{}         //Loading 完全关闭后触发的函数
})

使用服务调用 Loading 怎么实现在某个div 中显示加载动画，而不是全屏显示

<div class="table-container"><div ref="divBox"></div>
</div>import { ref } from 'vue'
const divBox = ref()
const loading = ElLoading.service({target: divBox.value?.$el,   //Loading 需要覆盖的 DOM 节点fullscreen: false,   //是否全屏显示text: '拼命加载中',  //加载图标下方的加载文案
})<style>
.table-container {position: relative; /* 关键样式 */height: 100%; /* 确保容器有高度 */
}
</style>