给el-button加上防抖

在Vue.js中，给`el-button`这样的元素添加防抖(debounce)功能通常是为了优化用户的操作响应，防止短时间内连续点击触发多次不必要的函数执行。你可以通过使用JavaScript的`debounce`函数库，如lodash的`_.debounce`，或者自定义一个简单的防抖函数来实现。

这里是一个基本的例子，假设你想限制按钮点击事件每秒只触发一次：

<template>
  <el-button @click="handleClick" :style="{ loading: isDebouncedLoading }">点击我</el-button>
</template>

<script>
import { debounce } from 'lodash'; // 引入lodash的防抖函数

export default {
  data() {
    return {
      isDebouncedLoading: false,
    };
  },
  methods: {
    handleClick() {
      this.isDebouncedLoading = true;
      this.debounceFunction();
    },
    debounceFunction() {
      const debouncedAction = debounce(() => {
        // 这里是你需要执行的任务，例如异步请求或其他处理
        this.doSomething();

        // 防抖任务完成后，设置isDebouncedLoading回False
        this.isDebouncedLoading = false;
      }, 1000); // 设置延迟时间，这里是1秒

      debouncedAction();
    },
    doSomething() {
      // 执行实际的操作
      console.log('防抖后的操作');
    }
  }
};
</script>

在这个例子中，当用户点击按钮时，`handleClick`会立即标记`isDebouncedLoading`为`true`，然后开始执行`debounceFunction`，只有在1秒之后，`doSomething`才会真正执行。