vue 防止重复点击按钮

在Vue中防止重复点击按钮通常是为了防止因用户快速多次点击而触发多次事件处理，尤其是在涉及到数据提交或修改操作时，这可能会导致一些问题，比如重复发送请求等。

一个常用的方法是通过添加一个布尔型数据属性来控制按钮的点击状态。当按钮被点击时，这个属性会被设置为`true`，同时在按钮的点击事件处理函数中设置一个定时器，在定时器的回调函数中将该属性重置为`false`。在设置为`true`和重置为`false`的过程中，按钮可以被禁用或显示一个加载指示器，以此来提示用户正在处理中，避免重复点击。

下面是实现该功能的一个简单示例：

<template>
  <button :disabled="isSubmitting" @click="handleClick">
    提交
  </button>
</template>

<script>
export default {
  data() {
    return {
      isSubmitting: false,
    };
  },
  methods: {
    handleClick() {
      if (this.isSubmitting) return;
      this.isSubmitting = true;
      // 执行提交操作
      this.submitData().then(() => {
        this.isSubmitting = false;
      }).catch(() => {
        this.isSubmitting = false;
      });
    },
    submitData() {
      // 提交逻辑
      return new Promise((resolve, reject) => {
        // 模拟异步操作
        setTimeout(() => {
          resolve();
          // 或者 reject(new Error('提交失败'));
        }, 3000);
      });
    },
  },
};
</script>

在这个例子中，`:disabled="isSubmitting"`指令用于根据`isSubmitting`的值控制按钮的禁用状态，`@click="handleClick"`用于绑定点击事件处理函数。`handleClick`函数首先检查`isSubmitting`标志，如果已经为`true`则直接返回，避免重复执行。如果为`false`，则设置为`true`并执行异步操作，在操作完成后将`isSubmitting`设置回`false`。