vue节流全局指令超级简单
最近后台项目管理系统居多，一直用局部指令节流有些麻烦，这里贴出全局文本框用户输入后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>
```
