VUE Toast 防止重复提交

<template>
  <div>
    <button @click="submit" :disabled="disabled">提交</button>

    <vue-toast ref="toast"></vue-toast>
  </div>
</template>

<script>
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/index.css';

export default {
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    submit() {
      if (this.disabled) {
        return;
      }

      this.disabled = true;

      // 模拟异步请求
      setTimeout(() => {
        // 提交成功
        this.$refs.toast.open({
          message: '提交成功',
          type: 'success'
        });

        // 重置按钮状态
        setTimeout(() => {
          this.disabled = false;
        }, 2000);
      }, 2000);
    }
  },
  components: {
    VueToast
  }
}
</script>
 

以上代码中，disabled属性控制按钮是否可点击，初始值为false。当用户点击提交按钮后，按钮的disabled属性会变为true，按钮会被禁用。在异步请求完成后，利用setTimeout函数将按钮状态重置为可点击。通过这种方式，可以有效防止用户连续点击按钮导致的重复提交。