vue中input 防抖

这里介绍的是rxjs流事件实现方式。

npm i rxjs rxjs-compat vue-rx -S

目前vue中下载的vue版本是6.x，需要同时下载rxjs-compat协助。

rxjs 6.x 官网：https://rxjs.dev/api/operators

main.js中引入相关包

import VueRx from 'vue-rx';
import Rx from 'rxjs/Rx';

Vue.use(VueRx, Rx);

在input所在的vue文件中，使用v-stream绑定事件，以及方法

<el-input v-model="jobForm.query" placeholder="支持模糊查询" v-stream:input="searchData$"></el-input>

export default {

    ...

 

    domStreams: ['searchData$'],
    subscriptions() {
        return {
            sd$: this.searchData$.debounceTime(500).pluck('event').map( query => {
                console.log('map:', query );
                query && query.msg && this.getData(query.msg, true);
            })
        }
    },

    ...

}