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);


感谢支持与鼓励~