vue封裝全域性loading

2021-10-11 18:18:12 字數 1624 閱讀 2592

首先建立乙個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)

})

各位客官要是感覺有用的話能留個小心心嘛,謝謝啦!!!^ v ^

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