标签：size nts 展开 span default state com var date
参考：
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);
标签：size nts 展开 span default state com var date
原文地址：https://www.cnblogs.com/flypig666/p/12310843.html
