vue防止按钮重复点击

1.新建一个plugin.js文件

import Vue from 'vue'
// 在vue上挂载一个指量 preventReClick
const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    console.log(el.disabled)
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
        //binding.value可以自行设置。如果设置了则跟着设置的时间走
        //例如：v-preventReClick='500'
      }
    })
  }
});

export { preventReClick }

2.打开main,js文件,引入plugin.js文件

import preventReClick from './plugins'

注意：路径写你创建的路径，不然找不到

3.给需要防止重复点击的按钮加上：v-preventReClick

<button  @click="toChangeFn()" v-preventReClick>按钮</button>

注意：标签如果是div,p,span...，请换成button，不然没效果，记得给button去掉边框样式

button{
    border:none;
}

4.这样再点击按钮，就不会重复请求数据了，over