vue 防止按钮重复点击

在Vue中防止按钮重复点击通常有两种方法：

1. **v-model结合input[type="button"]**: 可以利用`v-model`和`input[type="button"]`元素的特点，将其转换成禁用状态。当按钮被点击时，将`this.disabled = true`，阻止再次点击。当需要恢复时，再设置`this.disabled = false`。

<button v-model="isDisabled" @click="handleClick">点击我</button>

<script>
export default {
  data() {
    return {
      isDisabled: false,
    };
  },
  methods: {
    handleClick() {
      this.isDisabled = true;
      // ...其他处理逻辑
      setTimeout(() => {
        this.isDisabled = false;
      }, 1000); // 假设你想等待1秒后再解除禁用
    },
  },
};
</script>

2. **事件代理和计数器**：如果按钮很多并且不需要全局禁用，可以使用事件代理，在父组件上监听点击事件，并在回调中检查点击次数。例如，每次点击增加一个计数器，当达到限制次数就阻止后续点击。

<template>
  <div>
    <button @click="$emit('handleClick')">点击我</button>
  </div>
</template>

<script>
export default {
  props: {
    maxTimes: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    handleClick(e) {
      if (this.maxTimes > 0) {
        this.$emit('handleClick', e);
        this.maxTimes--;
      } else {
        console.log('已达到最大点击次数');
      }
    },
  },
};
</script>

然后在父组件中接收这个事件并处理。