Vue 按钮防止重复提交

我的项目是vue+element ui ,两种方式 防止重复提交

第一种

按钮 提交的时候把按钮禁用 等请求完成启用主要用到disabled 禁用

 <el-button :disabled="disabled" style="color: #fff;" class="btnBg" @click="submit()">{{lang == 2?"Send":"发送"}}</el-button>

 async submit(){
      let obj = {
        huiyiId: window.localStorage.posterHuiyiId,
      }
      this.disabled=true
      let res = await this.$api.saveDialogue(obj);
      if(res.success){
        this.disabled=false
        this.textarea = "";
      }
    },

第二种

在main.js方法里添加 思路也是把按钮禁用

//防多次点击，重复提交
Vue.directive('preventReClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 2000)
      }
    })
  }
});

<el-button type="primary" v-preventReClick @click="submitForm">确 定</el-button>