使用vue-element-loading實現(xiàn)loading頁
由于請求服務(wù)端接口需要時間，在請求時加上一個loading logo效果將極大提升用戶體驗和減輕服務(wù)端壓力身冀。
使用 vue-element-loading 比較小的插件實現(xiàn)
這是文檔地址：https://biigpongsatorn.github.io/#/vue-element-loading
使用步驟：
安裝：
npm install vue-element-loading --save
安裝結(jié)果
我的做法是將vue-element-loading的:active放在vuex中控制,因為這樣可以少寫點代碼??
import Vuex from 'vuex'
export default () => {
return new Vuex.Store({
state: {
count: 0, //應(yīng)用初始化的數(shù)據(jù)
vueElementLoading: false
},
mutations: { //修改state的方法
updateCount(state, num) {
state.count = num
},
updateLoading(state, num) {
state.vueElementLoading = num
}
}
})
}
具體要加的代碼我在下邊圖片標(biāo)出來了齿桃，只需要在要加上loading的div塊前面加上
<vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#FF6700"/>
即可
1540353077.png
1540353086.png
1540353086(2).png
歡迎提問。
