vue全域性loading動畫

首先我們需要寫乙個動畫樣式，這裡我們就用element-ui裡的loading載入吧

"this.$store.state.show"

class
="big"
>
class
="loading"
v-loading=
"loading"
element-loading-text=
"拼命載入中"
element-loading-spinner=
"el-icon-loading"
element-loading-background=
"rgba(0, 0, 0, 0.8)"
>
<
/div>
<
/div>

style樣式為：

.big

.loading

在data中：定義乙個狀態繫結動畫的顯示

data()

;},

在vuex中定義乙個狀態來繫結div的顯示隱藏

import vue from

'vue'
import vuex from
'vuex'
vue.
use(vuex)
const store =
newvuex.store(,
mutations:,}
)export
default store

最後在main.js中寫入

import axios from

'axios'
axios.interceptors.request.
use(
function
(config)
)//定義乙個響應***
axios.interceptors.response.
use(
function
(config)
)

vue封裝全域性loading

首先建立乙個loading檔案 loadingall element loading background rgba 0,0,0,0.6 div div template export default script 在store中新增變數 然後就可以使用啦 在需要用到的頁面新增如下 computed...

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 跳轉loading動畫元件

內容如下 class loading div template export default script lang scss scoped loading style import loading from components loading.vue vue.component v loadin...