vue請求前的loading動畫效果

參考：

　　https://www.jianshu.com/p/304c665478b8

　　https://biigpongsatorn.github.io/#/vue-element-loading

 

1、安裝

npm install vue-element-loading --save

2、使用vuex控制active（是否開啟loading）

// 用於控制是否顯示加載動畫 // 參考自https://www.jianshu.com/p/304c665478b8
const state = { count: 0, //應用初始化的數據
    vueElementLoading: false, imgLoading: false // 用於控制圖片加載動畫
} const getters = { } // 改變state狀態
const mutations = { updateCount(state, num) { state.count = num }, updateLoading(state, num) { state.vueElementLoading = num }, updateImgLoading(state, num) { state.imgLoading = num } } export default { state, getters, mutations }

3、vue組件中引入loading

import VueElementLoading from 'vue-element-loading';

const components = { VueElementLoading };

在想要有loading效果前的div加上以下代碼：

    <vue-element-loading :active="this.$store.state.elementloading.vueElementLoading" spinner="spinner" color="#FF6700"
    />

控制是否展開：

開啟：

var vm = this.$store; vm.commit('updateLoading', true); console.log('是否開啟加載', this.$store.state.elementloading.vueElementLoading);

關閉：

vm.commit('updateLoading', false);