僅供參考

---

一、加載動畫

當我們打開某個頁面時，如果需要加載的數據很多或者網絡很差，頁面加載就會非常緩慢，中間可能會很長時間顯示空白，那么就需要加載動畫進行一個過渡，既可以起到一個提示的作用，也可以增加用戶體驗

---

二、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>

關鍵點：
（1）target 字段設置為要添加動態加載效果的 DOM元素
（2）fullscreen 設置為 false 關閉全屏顯示
（3）要添加加載動畫的 DOM 元素的父容器必須有高度且設置了相對定位（relative）