H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue,element-ui中如何更好的处理多个按钮的loadiing状态

项目是用vue,vuex,element-ui,vue-router,axios写的一个单页的后台管理网站,整个管理页面包含一些页面级别的组件,通过vue-router来跳转到不同页面组件

现在的需求是,页面里的按钮点击后和后台进行交互的时候,需要显示为loading状态。

因为element-ui中,el-button组件的loading状态可以用一个变量来控制,所以我给每个会产生交互的按钮都绑定了一个loading变量。但是因为每个页面都有按钮,按钮越来越多,每个都声明一个变量来控制十分的繁琐和重复,感觉这种方法并不理想。

我尝试用了axios的拦截器,虽然每次发起请求的时候能够拦截,但是问题就是,无法知道这个请求来自哪个按钮触发,所以也无法更新按钮的loading状态

我觉得比较理想的状态是一种类似事件委托的形式,不需要给每个按钮都设置变量,能否把这个loading状态抽离出来。

所以我想请教一下各位,有没有比较好的解决思路呢?不局限于element ui

回答:

使用事件委托 最好在按钮上覆盖一个div 使点击到的元素是这个div

<div @click="handleClick">
    <el-button type='info' class="btn" :loading="loadingBtn == 1" icon='plus'>
        按钮1
        <div class="click-block"  data-index="1"></div>
    </el-button>
    
    <el-button type='info' class="btn" :loading="loadingBtn == 2" icon='plus'>
        按钮2
        <div class="click-block"  data-index="2"></div>
    </el-button>
    <el-button type='info' class="btn" :loading="loadingBtn == 3" icon='plus'>
        按钮3
        <div class="click-block"  data-index="3"></div>
    </el-button>
</div>

js

export default {
    data(){
        return {
            loadingBtn: 0
        }
    }
    methods: {
        handleTestBlur(e) {
            console.log(e.target);
            this.loadingBtn = e.target.getAttribute('data-index')
        },
    }
}

css

<style lang='scss' scoped>

.btn {
  position: relative;
}
.click-block {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
</style>

回答:

给每个按钮设置ref属性,代码如下

<!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元素修改样式

本文地址:H5W3 » vue,element-ui中如何更好的处理多个按钮的loadiing状态

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址