vue 防抖事件如何优雅实现

ethanYin
  • 125

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

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

有没有比较优雅的实现?

回复
阅读 4.9k
4 个回答
brokkr
  • 938
✓ 已被采纳

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

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> 就好了,怎么会臃肿?

封装组件,在组件里绑定状态呢?

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏