每次都要手动写防抖好麻烦，给干成事件修饰符～

思路

每次都要在函数中手动根据业务需求包一层防抖，麻烦至极

function onSearch(event: InputOnInputEvent) {
    shake(() => {
        keyword.value = event.detail.value
        page = 1
        getAlbum()
    })
}

想着要么干成ts修饰器，可以加在函数顶部；要么放事件调用的地方，做个事件修饰符。

由于vue setup语法和vue2都不是类驱动的，所以用事件修饰符方法。

写了个vite插件实现修饰符功能，具体功能就是正则匹配.shake中调用的方法，如果不是async的，加上async， 然后await 防抖函数。

插件功能比较简单，主要是方便开发的时候使用和理解 ～

// .vue file
<div @click.shake="onClick()">click me!</div>
<input @input.shake="onInput()"/>

介绍

为您的vue项目增加快捷的防抖事件修饰器
注意：event="" 中接受内容必须是一个函数

安装

npm i vue-event-shake

配置

// vite.config.ts
...
    plugins: [
        shake()
    ]
...

在项目中使用

// .vue file
<div @click.shake="onClick()">click me!</div>
<input @input.shake="onInput()"/>

eslint规则配置

    'vue/valid-v-on': ['error', {
        modifiers: ['shake'],
    }],