vue 防抖事件如何优雅实现

Question

vue项目里，想实现一个按钮如果是发送请求的话，点击完按钮文字变成转圈圈，且无法点击直到请求成功，或者5s后才让用户能点击并且加载效果（转圈圈）消失

其实给每个按钮绑定相应的状态就可以实现，但是如果按钮过多，状态就显得臃肿，毕竟一个页面里点击发请求是很常见的，

有没有比较优雅的实现？

Answer 1

你平常不写单文件组件的吗？这是典型使用单文件组件的地方，给你个简单的例子：

MyButton.vue

<template>
    <el-button v-loading="busy" @click="action" :disabled="busy">
        {{ title }}
    </el-button>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
        },
        busy: {
            type: Boolean,
            default: false,
        },
        action: {
            type: Function,
            required: true,
        },     
    },
}
</script>

App.vue

<template>
    <div id="app">
        <MyButton title="我的按钮" :action="show" :busy="busy"></MyButton>
        <br>
        <Button @click="busy=!busy">测试转圈</Button>
    </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
    name: 'App',
    data() {
        return {
            busy: false
        }
    },
    components: {
        MyButton,
    },
    methods: {
        show() {
        alert("按钮点下了");
        }
    }
}
</script>

这里用到了 element-ui 的 el-button 和 v-loading，主要懒得写 loading 转圈的代码了
在你需要按钮的地方直接用<MyButton></MyButton> 就好了，怎么会臃肿？

Answer 2

试试 Rx debounceTime？

Answer 3

封装组件，在组件里绑定状态呢？

Answer 4

加载效果一般两种情况：全局请求和定制请求。全局请求可以通过请求拦截器，局部就正常操作即可。