Element用法---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 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 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 节点,默认是 body
  lock: 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>

关键点：
（1）target 字段设置为要添加动态加载效果的 DOM元素
（2）fullscreen 设置为 false 关闭全屏显示
（3）要添加加载动画的 DOM 元素的父容器必须有高度且设置了相对定位（relative）