最近后台项目管理系统居多，一直用局部指令节流有些麻烦，这里贴出全局文本框用户输入后0.8秒执行方法的节流指令 和 按钮节流的点击事件

---

一、输入框节流外部引入指令方式：

 1.1 ： 新建debounce.js文件：

```

import Vue from 'vue'

// 自定义防抖

Vue.directive('debounce',{

  inserted: function (el, binding) {

    let timer

    el.addEventListener('keyup', () => {

      if (timer) {

        clearTimeout(timer)

      }

      timer = setTimeout(() => {

        binding.value()

      }, 800)

    })

  }

})

```

1.2、main.js中引入：

```

import "@/utils/debounce.js"

```

对，就这么简单

1.3、页面中使用：

```

   <el-input v-model="xxx.xxxxx"  v-debounce="自己的方法名">

```

---

二、贴出vue单个页面上 input 节流的局部指令：

```

    // 节流指令

  directives: {

    debounce: {

      inserted: function (el, binding) {

        let timer

        el.addEventListener('keyup', () => {

          if (timer) {

            clearTimeout(timer)

          }

          timer = setTimeout(() => {

            binding.value()

          }, 500)

        })

      },

    },

  }

```

使用方法：

```

<el-input v-model="xxx.xxxxx"  v-debounce="页面中执行的方法名">

```

---

三、button 按钮的节流方法

3.1、新建 preventReClick.js 文件:

```

import Vue from 'vue'

//按钮节流

const preventReClick = Vue.directive('preventReClick', {

  inserted: function (el, binding) {

    el.addEventListener('click', () => {

      if (!el.disabled) {

        el.disabled = true

        setTimeout(() => {

          el.disabled = false

        }, binding.value || 3000)

      }

    })

  }

});

export { preventReClick }

```

3.2、main.js中：

```

import { preventReClick }from '@/utils/preventReClick'

Vue.prototype.$preventReClick = preventReClick; // 节流函数

```

3.3、使用

```

   <el-button :@click="getCodeMsgBtn" v-preventReClick>按钮</el-button>

```