最近后臺(tái)項(xiàng)目管理系統(tǒng)居多，一直用局部指令節(jié)流有些麻煩，這里貼出全局文本框用戶輸入后0.8秒執(zhí)行方法的節(jié)流指令 和 按鈕節(jié)流的點(diǎn)擊事件
一、輸入框節(jié)流外部引入指令方式：
?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"
```
對(duì)，就這么簡(jiǎn)單
1.3、頁(yè)面中使用：
```
???<el-input?v-model="xxx.xxxxx"? v-debounce="自己的方法名">
```
二、貼出vue單個(gè)頁(yè)面上 input 節(jié)流的局部指令：
```
????//?節(jié)流指令
??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="頁(yè)面中執(zhí)行的方法名">
```
三、button 按鈕的節(jié)流方法
3.1、新建?preventReClick.js 文件:
```
import Vue from 'vue'
//按鈕節(jié)流
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; // 節(jié)流函數(shù)
```
3.3、使用
```
? ?<el-button :@click="getCodeMsgBtn" v-preventReClick>按鈕</el-button>
```
