天天看点

vue点击按钮重复提交(思路:通过指令的方式解决)

1、src/directives/preventClick.js

import Vue from 'vue'

Vue.directive('preventClick', {
  inserted(el) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, 500)
      }
    })
  }
})      

2、main.js

import './directives/preventClick'      

3、使用:button按钮可以使用,500ms,从一定程度上缓解重复请求的问题

<div id="app">
    <button v-preventClick @click="handlePuTong">普通按钮</button>
    <el-button v-preventClick @click="handleElement">Element按钮</el-button>
    <van-button v-preventClick @click="handleVant">vant按钮</van-button>
  </div>      
vue