vue+element 按钮Loading统一处理
vue 按钮Loading处理1.按钮的loading效果可以处理后台响应时间有点长场景,这里使用store封装了下处理方式// loading.jsimport Vue from 'vue';const loading = {state: {},mutations: {SET_LOADING: (state, data) => {const isObject =Object.protot
·
vue 按钮Loading处理
1.按钮的loading效果可以处理后台响应时间有点长场景,这里使用store封装了下处理方式
// loading.js
import Vue from 'vue';
const loading = {
state: {},
mutations: {
SET_LOADING: (state, data) => {
const isObject =
Object.prototype.toString.call(data) === '[object Object]';
if (!isObject) return;
Object.keys(data).forEach(key => {
Vue.set(state, key, data[key]);
});
},
CANCAL_LOADING: state => {
Object.keys(state).forEach(key => {
Vue.delete(state, key);
});
}
},
actions: {
SetLoading({ commit }, data) {
commit('SET_LOADING', data);
},
CancalLoading({ commit }, data) {
commit('CANCAL_LOADING', data);
}
}
};
export default loading;
// http.js 请求方式
service.interceptors.response.use(
response => {
// 关闭全局按钮Loading响应
store.dispatch('CancalLoading');
...
})
2.组件内定义
<el-button :loading="btn.save" @click="handleClick">保存</el-button>
computed: {
btn() {
return this.$store.state.loading;
}
}
methods: {
handleClick() {
this.$store.dispatch('SetLoading', { save: true });
}
}
以上就可以完美的使用loading,而不用每个都在data中定义了。
更多推荐
已为社区贡献1条内容
所有评论(0)