vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程
更新時(shí)間：2022年08月13日 11:22:18 作者：無語，人生的過客?????
這篇文章主要介紹了vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示
比如進(jìn)入一個(gè)頁面數(shù)據(jù)加載緩慢的頁面后，等待后端返回?cái)?shù)據(jù)顯示在頁面時(shí)給個(gè)loading的樣式
像下面這樣：
代碼實(shí)現(xiàn)如下：
getStudent() {
// 開始加載
let loading = this.$loading({
lock: true,//lock的修改符--默認(rèn)是false
text: "拼命加載中，請稍候...",//顯示在加載圖標(biāo)下方的加載文案
background: "rgba(0,0,0,0.8)",//遮罩層顏色
spinner: "el-icon-loading",//自定義加載圖標(biāo)類名
});
getStudent().then(res => {
if (res.code === 200) {
this.user = res.data;
// 獲取數(shù)據(jù)顯示成功后，關(guān)閉loading
loading.close();
} else {
this.$message.error("錯(cuò)誤！");
}
});
}
參數(shù)列表說明如下（詳細(xì)可以觀看elementUI官網(wǎng)）
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| target | Loading 需要覆蓋的 DOM 節(jié)點(diǎn)。可傳入一個(gè) DOM 對象或字符串；若傳入字符串，則會(huì)將其作為參數(shù)傳入 document.querySelector以獲取到對應(yīng) DOM 節(jié)點(diǎn) | object/string | document.body |
| body | 同 v-loading 指令中的 body 修飾符 | boolean | false |
| fullscreen | 同 v-loading 指令中的 fullscreen 修飾符 | boolean | true |
| lock | 同 v-loading 指令中的 lock 修飾符 | boolean | false |
| text | 顯示在加載圖標(biāo)下方的加載文案 | string | — |
| spinner | 自定義加載圖標(biāo)類名 | string | — |
| background | 自定義加載圖標(biāo)類名 | string | — |
| customClass | 自定義加載圖標(biāo)類名 | string | — |
vue中加載loading問題
首先在components文件夾中新建一個(gè)loading.vue組件：
1.loading.vue組件內(nèi)容如下
<template>
<div class="markbox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="sun-loading"></div>
</div>
</template><script>
export default {
name: 'loading',
data() {
return {
loading: false
}
},
created() {
var that = this;
this.bus.$on('loading', function(data) {
that.loading = !!data;
})
}
}
</script>css代碼：
/*loading開始*/
.sun-loading {
width: 45px;
height: 45px;
display: block;
animation: sunLoading 1s steps(12, end) infinite;
background: transparent url('data:image/gif;base64,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');
background-size: 100%;
margin:auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right:0;
}
/*loading結(jié)束*/ 2.app.vue中設(shè)置
<template>
<div id="app">
<router-view/>
<loading></loading>
</div>
</template>
<script>
import loading from '@/components/common/loading'
export default {
name: 'App',
components:{loading}
}
</script>3.在main.js中設(shè)置
Vue.prototype.bus = new Vue;
4.在.vue組件中使用
// 顯示loading
this.bus.$emit('loading', true);
// 關(guān)閉loading
this.bus.$emit('loading', false);效果如下：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue調(diào)試神器vue-devtools安裝方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
在vue中獲取wangeditor的html和text的操作
這篇文章主要介紹了在vue中獲取wangeditor的html和text的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南（純凈版）
網(wǎng)上百度uniapp使用vant時(shí),很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實(shí)uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南的相關(guān)資料,需要的朋友可以參考下2024-02-02
在項(xiàng)目開發(fā)中,有兩個(gè)功能特別類似,如果單獨(dú)實(shí)現(xiàn),會(huì)有很多重復(fù)的代碼，這時(shí)候就會(huì)用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-02
這篇文章主要介紹了vue自定義指令之面板拖拽的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面
這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue 使用外部JS與調(diào)用原生API操作,結(jié)合實(shí)例形式分析了vue.js調(diào)用外部JS與原生API相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2019-12-12
Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù)
這篇文章主要介紹了Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue 的鉤子函數(shù)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09