Element ui實現loading的區域性重新整理

在一次vue+element-ui後台管理系統的專案中，遇到這樣乙個問題，引入element-ui載入框後，loading會佔滿整個螢幕，雖然通過改變路由實現了區域性重新整理，但是loading的全屏重新整理，讓人看上去很是不爽，以為是全域性重新整理。再乙個問題就是，乙個頁面中可能含有的多個請求，在***彙總設定關閉loading後，會出現的問題就是，有些資料還是空的，但是loading框就已經關閉了我們需要實現的是所有請求完成後關閉loading。所以這是另乙個問題。

所以為了解決這兩個問題做此總結，幫助更多的小夥伴脫坑。

如果要實現全域性的重新整理則可以檢視博主的另一片總結：

傳送門

沒有思路就沒有出路，先說思路：

區域性的loading框的出現，element-ui在vue中引入後，就會預設在vue原型鏈上掛在乙個loaiding方法，可以通過vue.prototype.$loading看到，解決問題的關鍵就在這個方法中，該方法中可以設定這麼幾個屬性lock，text，target，background，我們搞清楚這些，問個問題也就迎刃而解。lock可以看作是loading的開關，text則是loading的文字的提示資訊。target則是根據型別顯示需要出現loading的區域。background則是loading的bgcolor

所有請求完成後再關閉loading，預設大家都知道vue***。解決思路比較簡單，建立乙個定時器，在request時，num++，在response時num--當num<=0時，則所有請求都有了結果，這個時候我們就可以關閉loading了。

情景及demo

後台管理系統，header，aside，main，除了loading，404外，實現main的區域性重新整理，且所有請求完成後再關閉loading框。先看我們的網路請求層，封裝的fetch.js檔案.

import axios                from 'axios'import  from 'element-ui'import router               from '../router/permission'import vue from 'vue' //
loading框設定區域性重新整理，且所有請求完成後關閉loading框
let loading;
function
startloading() );
}function
endloading() //
宣告乙個物件用於儲存請求個數
let needloadingrequestcount = 0;
function
showfullscreenloading() 
needloadingrequestcount++;
};function
tryhidefullscreenloading() }; 
//請求攔截
axios.interceptors.request.use(config =>, err =>);
return
promise.resolve(err);
})//
響應攔截
axios.interceptors.response.use(res => 
else
if (res.data.code == 401) 
else
if (res.data.code == 201) );
return
promise.reject(res);
} return
promise.reject(res);
}, err =>);
} else
if (err.response.status == 403) 
else
); }
return
promise.reject(err);}) 
let base = '';
export const postrequest = (url, params) =>$`,
data: params,
transformrequest: [
function
(data) 
return
ret }],
headers: );
}export const getrequest = (url, data = '') =>$`
});}

下來我們就需要檢視我們的主入口檔案home.vue.

<
template
>
<
el-container
>
<
el-header 
class
="header-wraper"
>
<
admin-header
>
admin-header
>
el-header
>
<
el-container 
class
="container"
>
<
el-aside 
>
<
admin-aside
>
admin-aside
>
el-aside
>
<
el-main 
class
="loading-area"
>
<
keep-alive
>
<
router-view 
v-if
="this.$route.meta.keepalive"
>
router-view
>
keep-alive
>
<
router-view 
v-if
="!this.$route.meta.keepalive"
>
router-view
>
el-main
>
el-container
>
el-container
>
template
>
<
script
>
import adminaside from 
'@/components/commons/aside/index';
import adminheader from 
'@/components/commons/header/index
'export 
default
, data () 
},}script
>
<
style 
lang
="less"
scoped
>
.header-wraper 
.container 
style
>

關鍵實現以上兩部就可實現頭部預覽效果區域性重新整理。

Element ui實現loading的區域性重新整理

element ui實現前端分頁

elementUI實現前端分頁

基於element ui實現table可配置化

Element ui實現loading的區域性重新整理

element ui實現前端分頁

elementUI實現前端分頁

基於element ui實現table可配置化

相關推薦