在vue项目中使用fastclick插件

在vue项目中使用fastclick可以安装fastclick插件，安装使用方法如下
1.npm install --save fastclick
(注：npm安装时--save 和 --save-dev的区别，前者安装后，在package.json中的dependencies中生成，后者是在devDependencies中生成。如果是开发中使用的依赖使用--save-dev，如果是生产的依赖使用--save)

image.png

2.在main.js中引入并绑定到body

import  FastClick  from  'fastclick'
FastClick.attach(document.body);
Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 500)
      }
    })
  }
})

3.在页面中使用

<button v-preventReClick="800" @click.prevent="testClick($event)" >测试</button>
testClick (event) {
  if (event.target.disabled) {
     this.$Toast('点击太频繁了')
     return
  }
}

注：fastClick使用注意，页面点击项需要是当前项，如：

1. <button v-preventReClick="800" @click.prevent="testClick($event)" >测试</button>

<div class="fast-click" v-preventReClick="800" @click.prevent="testClick($event)">
<button >测试</button>
</div>
如上两点中第一点使用正确，第二点错误会获取不到点击状态