vue封裝全域性loading

首先建立乙個loading檔案

"loadingall" element-loading-background=

"rgba(0, 0, 0, 0.6)"
>
<
/div>
<
/div>
<
/template>
export
default}}
<
/script>
在store中新增變數

然後就可以使用啦

//在需要用到的頁面新增如下**

computed:},
methods:);
}else);
}}else})
;},}

全域性使用

// request***

service.interceptors.request.
use(config =>
).istoken ===
falseif(
gettoken()
&&!istoken)
store.state.user.loadingall =
true
return config
}, error =>
)// 響應***
service.interceptors.response.
use(res =>)}
})}else
if(code ===
500)
)      store.state.user.loadingall =
false
return promise.
reject
(new
error
(msg))}
else
if(code !==
200)
)      store.state.user.loadingall =
false
return promise.
reject
('error')}
else},
error =>
= error;
if(message ==
"network error"
)else
if(message.
includes
("timeout"))
else
if(message.
includes
("request failed with status code"))
message()
return promise.
reject
(error)
})

vue全域性loading動畫

首先我們需要寫乙個動畫樣式，這裡我們就用element ui裡的loading載入吧 this.store.state.show class big class loading v loading loading element loading text 拼命載入中 element loading ...

Vue 全域性loading元件開發

開發loading元件 src components loading index.vue u loading fade visible class u loading mask u loading spinner assets loading.gif u loading text p div div...

vue 元件全域性封裝 vue封裝頁面全域性載入子元件

1.首先我們看一下 element 中的載入方式，設定載入配置 openfullscreen2 2000 text 是要顯示的文字，spinner 是顯示的圖示 2.在封裝元件之前我們需要看一下文件 3.建立loading.js 檔案 import from element ui 引入 載入圖示 l...