Vue自定义指令

前言

前两个月因为公司工作内容调整，我这边开始负责一个前端项目，其实去年三季度时候这个项目有个需求排期比较紧张，boss又不想去其他项目组借人，而我当时手上iOS迭代刚好完成，于是我就提出可以参与进来，领导同意后就让我进来参与了一个模块的开发；今年这次调整算是彻底把这个项目交到我手上了，不过要说明的一点是我主要还是要做iOS的>_<，无论我参与前端还是后端，最终我都是一个iOSer😂😂😂

正文

因为我前端开发经验不足，说白了就是前端菜鸟，只不过之前由于兴趣看了学了些前端知识，又由于某些机会参与了一些项目，慢慢的也开始负责前端项目，但是经验还是不足。

这不，最近在开发过程中，有一个很小的功能，就是防止用户连点按钮，导致多次发起请求，我一开始的想法是点击的时候，做个判断，变量保存状态值，也确实这么去实现了，但是感觉这样写的话每个按钮都要写一遍，所以就搜了下有没有其他处理放水，然后就看到了一个自定义指令实现的方案

关于自定义指令的介绍看官方文档，其实我们在使用Vue时常用的绑定乳model，show等都是内置的一些指令，我们也可以自己写一些指令实现一些特殊的操作，比如我这个需求可以这么写

Vue.directive('doubleClick', {
  inserted(el, binding) {
      el.addEventListener('click', () => {
          if (!el.disabled) {
              el.disabled = true;
              setTimeout(() => {
                  el.disabled = false;
              }, binding.value || 1500)
          }
      })
  }
});

我因为想要全局都可以使用，所以直接在main.js中去注册了这个指令，那么在使用的时候就是如下方式

//使用
    <div
        class="license_text_action"
        @click="download(item.fileUrl, item.fileName)"
        v-doubleClick="2000"
    >
//或
    <div
        class="license_text_action"
        @click="download(item.fileUrl, item.fileName)"
        v-doubleClick
    >

这样就可以实现防止快速连续点击，时间可以自定义单位毫秒，详细使用和相关参数解释可以查看官方文档,我就不直接贴文档内容了