1. Loading加載

1.1. Loading加載數據時顯示動效。

1.2. 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	無

2. 服務的方式調用

2.1. 安要引入Loading服務, 以服務方式調用

import { Loading } from 'element-ui';Loading.service(options);

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

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

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

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

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

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

3. Loading加載例子

3.1. 使用腳手架新建一個名為element-ui-loading的前端項目, 同時安裝Element插件。

3.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Loading from '../components/Loading.vue' import MySelfLoading from '../components/MySelfLoading.vue' import FullScreenLoading from '../components/FullScreenLoading.vue' import TargetLoading from '../components/TargetLoading.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Loading' },{ path: '/Loading', component: Loading },{ path: '/MySelfLoading', component: MySelfLoading },{ path: '/FullScreenLoading', component: FullScreenLoading },{ path: '/TargetLoading', component: TargetLoading } ]const router = new VueRouter({routes })export default router

3.3. 在components下創建Loading.vue

<template><div><h1>區域加載</h1><h4>Element提供了兩種調用Loading的方法: 指令和服務。對于自定義指令v-loading, 只需要綁定Boolean即可。默認狀況下, Loading遮罩會插入到綁定元素的子節點, 通過添加body修飾符, 可以使遮罩插入至DOM中的body上。</h4><el-table v-loading="loading" :data="tableData"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div> </template><style>body {margin: 0;} </style><script> export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],loading: true}} } </script>

3.4. 在components下創建MySelfLoading.vue

<template><div><h1>自定義-可自定義加載文案、圖標和背景色</h1><h4>在綁定了v-loading指令的元素上添加element-loading-text屬性, 其值會被渲染為加載文案, 并顯示在加載圖標的下方。類似地, element-loading-spinner和element-loading-background屬性分別用來設定圖標類名和背景色值。</h4><el-table v-loading="loading" element-loading-text="拼命加載中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" element-loading-customClass="myLoad"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div> </template><script> export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],loading: true}} } </script>

3.5. 在components下創建FullScreenLoading.vue

<template><div><h1>整頁加載</h1><h4>當使用指令方式時, 全屏遮罩需要添加fullscreen修飾符(遮罩會插入至body上), 此時若需要鎖定屏幕的滾動, 可以使用lock修飾符; 當使用服務方式時, 遮罩默認即為全屏, 無需額外設置。</h4><el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">指令方式</el-button><el-button type="primary" @click="openFullScreen2">服務方式</el-button></div> </template><script> export default {data () {return {fullscreenLoading: false}},methods: {openFullScreen1 () {this.fullscreenLoading = truesetTimeout(() => {this.fullscreenLoading = false}, 2000)},openFullScreen2 () {// 完整引入了Element, 服務的方式調用Loadingconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',fullscreen: true,customClass: 'myLoad'})setTimeout(() => {loading.close()}, 2000)}} } </script>

3.6. 在components下創建TargetLoading.vue

<template><div><h1>目標元素</h1><h4>使用target在指定元素上加載。</h4><el-button type="primary" @click="targetElement">服務方式</el-button></div> </template><script> export default {methods: {targetElement () {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',fullscreen: false,customClass: 'myLoad',target: 'h1'})setTimeout(() => {loading.close()}, 2000)}} } </script>

3.7. 運行項目, 訪問http://localhost:8080/#/Loading

3.8. 運行項目, 訪問http://localhost:8080/#/MySelfLoading?

3.9. 運行項目, 訪問http://localhost:8080/#/FullScreenLoading?

3.10. 運行項目, 訪問http://localhost:8080/#/TargetLoading?

總結

以上是生活随笔為你收集整理的029_Loading加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。