项目是用vue,vuex,element-ui,vue-router,axios写的一个单页的后台管理网站，整个管理页面包含一些页面级别的组件，通过vue-router来跳转到不同页面组件
现在的需求是，页面里的按钮点击后和后台进行交互的时候，需要显示为loading状态。
因为element-ui中，el-button组件的loading状态可以用一个变量来控制，所以我给每个会产生交互的按钮都绑定了一个loading变量。但是因为每个页面都有按钮，按钮越来越多，每个都声明一个变量来控制十分的繁琐和重复，感觉这种方法并不理想。
我尝试用了axios的拦截器，虽然每次发起请求的时候能够拦截，但是问题就是，无法知道这个请求来自哪个按钮触发，所以也无法更新按钮的loading状态
我觉得比较理想的状态是一种类似事件委托的形式，不需要给每个按钮都设置变量，能否把这个loading状态抽离出来。
所以我想请教一下各位，有没有比较好的解决思路呢？不局限于element ui
给每个按钮设置ref属性，代码如下
极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button ref="btn1" @click="clickBtn1">按钮1</el-button>
<el-button ref="btn2" @click="clickBtn2">按钮2</el-button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
clickBtn1() {
this.$refs.btn1.loading = true;
setTimeout(() => {
this.$refs.btn1.loading = false;
}, 1000);
},
clickBtn2() {
this.$refs.btn2.loading = true;
setTimeout(() => {
this.$refs.btn2.loading = false;
}, 1000);
}
}
})
</script>
</html>如果不想使用ref，那就不要用自带的loading了，自己用event对象获取dom元素修改样式
6 回答3k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
2 回答2k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答986 阅读✓ 已解决
2 回答1.7k 阅读✓ 已解决
使用事件委托 最好在按钮上覆盖一个div 使点击到的元素是这个div
js
css