Loading 加載

本文轉載自查看原文 2018-03-14 06:58 9452 Notice組件

加載數據時顯示動效。

區域加載

在表格等容器中加載數據時顯示。

Element 提供了兩種調用 Loading 的方法：指令和服務。對於自定義指令v-loading，只需要綁定Boolean即可。默認狀況下，Loading 遮罩會插入到綁定元素的子節點，通過添加body修飾符，可以使遮罩插入至 DOM 中的 body 上。

 1 <template>
 2   <el-table
 3     v-loading="loading"
 4     :data="tableData"
 5     style="width: 100%">
 6     <el-table-column
 7       prop="date"
 8       label="日期"
 9       width="180">
10     </el-table-column>
11     <el-table-column
12       prop="name"
13       label="姓名"
14       width="180">
15     </el-table-column>
16     <el-table-column
17       prop="address"
18       label="地址">
19     </el-table-column>
20   </el-table>
21 </template>
22 
23 <style>
24   body {
25     margin: 0;
26   }
27 </style>
28 
29 <script>
30   export default {
31     data() {
32       return {
33         tableData: [{
34           date: '2016-05-03',
35           name: '王小虎',
36           address: '上海市普陀區金沙江路 1518 弄'
37         }, {
38           date: '2016-05-02',
39           name: '王小虎',
40           address: '上海市普陀區金沙江路 1518 弄'
41         }, {
42           date: '2016-05-04',
43           name: '王小虎',
44           address: '上海市普陀區金沙江路 1518 弄'
45         }],
46         loading: true
47       };
48     }
49   };
50 </script>

View Code

自定義

可自定義加載文案、圖標和背景色。

在綁定了v-loading指令的元素上添加element-loading-text屬性，其值會被渲染為加載文案，並顯示在加載圖標的下方。類似地，element-loading-spinner和element-loading-background屬性分別用來設定圖標類名和背景色值。

 1 <template>
 2   <el-table
 3     v-loading="loading2"
 4     element-loading-text="拼命加載中"
 5     element-loading-spinner="el-icon-loading"
 6     element-loading-background="rgba(0, 0, 0, 0.8)"
 7     :data="tableData"
 8     style="width: 100%">
 9     <el-table-column
10       prop="date"
11       label="日期"
12       width="180">
13     </el-table-column>
14     <el-table-column
15       prop="name"
16       label="姓名"
17       width="180">
18     </el-table-column>
19     <el-table-column
20       prop="address"
21       label="地址">
22     </el-table-column>
23   </el-table>
24 </template>
25 
26 <script>
27   export default {
28     data() {
29       return {
30         tableData: [{
31           date: '2016-05-03',
32           name: '王小虎',
33           address: '上海市普陀區金沙江路 1518 弄'
34         }, {
35           date: '2016-05-02',
36           name: '王小虎',
37           address: '上海市普陀區金沙江路 1518 弄'
38         }, {
39           date: '2016-05-04',
40           name: '王小虎',
41           address: '上海市普陀區金沙江路 1518 弄'
42         }],
43         loading2: true
44       };
45     }
46   };
47 </script>

View Code

整頁加載

頁面數據加載時顯示。

當使用指令方式時，全屏遮罩需要添加fullscreen修飾符（遮罩會插入至 body 上），此時若需要鎖定屏幕的滾動，可以使用lock修飾符；當使用服務方式時，遮罩默認即為全屏，無需額外設置。

 1 <template>
 2   <el-button
 3     type="primary"
 4     @click="openFullScreen"
 5     v-loading.fullscreen.lock="fullscreenLoading">
 6     指令方式
 7   </el-button>
 8   <el-button
 9     type="primary"
10     @click="openFullScreen2">
11     服務方式
12   </el-button>
13 </template>
14 
15 <script>
16   export default {
17     data() {
18       return {
19         fullscreenLoading: false
20       }
21     },
22     methods: {
23       openFullScreen() {
24         this.fullscreenLoading = true;
25         setTimeout(() => {
26           this.fullscreenLoading = false;
27         }, 2000);
28       },
29       openFullScreen2() {
30         const loading = this.$loading({
31           lock: true,
32           text: 'Loading',
33           spinner: 'el-icon-loading',
34           background: 'rgba(0, 0, 0, 0.7)'
35         });
36         setTimeout(() => {
37           loading.close();
38         }, 2000);
39       }
40     }
41   }
42 </script>

View Code

服務

Loading 還可以以服務的方式調用。引入 Loading 服務：

import { Loading } from 'element-ui';

在需要調用時：

Loading.service(options);

其中 options 參數為 Loading 的配置項，具體見下表。LoadingService 會返回一個 Loading 實例，可通過調用該實例的 close 方法來關閉它：

let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服務的方式調用的 Loading 需要異步關閉
  loadingInstance.close();
});

需要注意的是，以服務的方式調用的全屏 Loading 是單例的：若在前一個全屏 Loading 關閉前再次調用全屏 Loading，並不會創建一個新的 Loading 實例，而是返回現有全屏 Loading 的實例：

let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true

此時調用它們中任意一個的 close 方法都能關閉這個全屏 Loading。

如果完整引入了 Element，那么 Vue.prototype 上會有一個全局方法 $loading，它的調用方式為：this.$loading(options)，同樣會返回一個 Loading 實例。

Options

參數	說明	類型	可選值	默認值
target	Loading 需要覆蓋的 DOM 節點。可傳入一個 DOM 對象或字符串；若傳入字符串，則會將其作為參數傳入 `document.querySelector`以獲取到對應 DOM 節點	object/string	—	document.body
body	同 `v-loading` 指令中的 `body` 修飾符	boolean	—	false
fullscreen	同 `v-loading` 指令中的 `fullscreen` 修飾符	boolean	—	true
lock	同 `v-loading` 指令中的 `lock` 修飾符	boolean	—	false
text	顯示在加載圖標下方的加載文案	string	—	—
spinner	自定義加載圖標類名	string	—	—
background	遮罩背景色	string	—	—
customClass	Loading 的自定義類名	string	—	—

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 loading事件加載效果頁面預加載loading layui的loading加載中 vue加載loading圖 Loading加載頁面關於懶加載(lazy loading) loading(正在加載特效) Winform加載loading界面加載框（loading） react 首頁加載loading