1. 手ぶれ補正機能を定義する
export const debounceFn = <T>(fn: (...args: any[]) => T, limit = 300) => {
let timer: number | null = null
let result: T | null = null
return (...args: any[]) => {
if (timer) {
clearTimeout(timer)
timer = null
}
timer = window.setTimeout(() => {
result = fn(...args)
}, limit)
return result
}
}
2. カスタム手ぶれ補正コマンド
export const debounce: Directive = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
const { value } = binding
if (
!value ||
typeof binding.value.fn !== 'function' ||
!binding.value.event
)
return
el.addEventListener(binding.value.event, debounceFn(binding.value.fn))
},
beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {
const { value } = binding
if (
!value ||
typeof binding.value.fn !== 'function' ||
!binding.value.event
)
return
el.removeEventListener(binding.value.event, debounceFn(binding.value.fn))
}
}
3. すべてのカスタム コマンドを登録する
import * as directives from './directives'
import { App, Directive } from 'vue'
const useDirectives = (app: App): void => {
Object.keys(directives).forEach((key) => {
app.directive(key, (directives as { [key: string]: Directive })[key])
})
}
export default useDirectives
main.js内
const app = createApp(App)
useDirectives(app)
4. 使用方法
<el-button type="primary" v-debounce="{ event: 'click', fn: confirm }"
>确定</el-button
>