袁来如此的工作笔记
袁来如此的工作笔记
竹杖芒鞋轻胜马,谁怕? 一蓑烟雨任平生。

vue请求前的loading动画效果

浏览量:197

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 = {
    Count(state, num) {
        state.count = num
    },
    Loading(state, num) {
        state.vueElementLoading = num
    },
    ImgLoading(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(\Loading\, true);
console.log(\是否开启加载\, this.$store.state.elementloading.vueElementLoading);

关闭:

vm.commit(\Loading\, false);

打赏