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

/ 0评 / 0

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

思路

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

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'],
    }],

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注