按钮多次点击重复提交数据(按钮连击问题）

我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false，按钮可以点击。 当我们点击这个按钮的时候，首先将按钮的绑定isDisable设置为true，1秒后立马将其置为false。 所以用户只能有一秒的时间去操作这个按钮。

<template>
  <button @click="submit()" :disabled="isDisable">点击</button>      //1、给按钮添加disabled属性
</template>
 
<script>
  export default {
    name: 'TestButton',
    data: function () {
      return {
        isDisable: false    //2、设置默认状态disabled：false，按钮可用
      }
    },
    methods: {
      submit() {
        this.isDisable = true   //3、点击以后 disabled:true  按钮禁用，执行代码
        
        //提交时执行的代码
        
        setTimeout(() => {   
          this.isDisable = false    //4、1s后设置按钮可用
        }, 1000)
      }
    },
  }
</script>