//代码路径 src\utils\throttle.js
// 点击防抖
const throttle = {
bind: (el, binding) => {
let throttleTime = binding.value // 防抖时间
if (!throttleTime) { // 用户若不设置防抖时间,则默认1s
throttleTime = 1000
}
let timer
let disable = false
el.addEventListener('click', event => {
if (timer) {
clearTimeout(timer)
}
if (!disable) { // 第一次执行(一点击触发当前事件)
disable = true
} else {
event && event.stopImmediatePropagation()
}
timer = setTimeout(() => {
timer = null
disable = false
}, throttleTime)
}, true)
}
}
// 将函数作为默认导出
export default throttle
//代码位置 src\main.ts
// 导入防抖逻辑js代码
import throttle from '@/utils/throttle'
const setupAll = async () => {
const app = createApp(App)
// 全局注册指令
app.directive('throttle',throttle.bind)
}
//具体使用,效果是1.5秒内的连续点击都无效,不点了,等1.5秒后才生效
<el-button type="danger" @click="getdocListF" v-throttle="1500">查询</el-button>