最近项目需要做这样一个需求:基于element-ui框架的vue项目,输入input框实现实时搜索后台响应的数据。但用户每次按下键盘就发送请求会导致系统性能不好等问题,这时需要考虑到用防抖去解决这个问题。所以我考虑使用输入框监听+lodash库https://www.lodashjs.com/docs/lodash.debounce的防抖来实现。

步骤简单:首先引入+使用

import {debounce} from 'lodash';
<el-form-item label="" prop="">
   <el-input
       placeholder=""
       v-model="formData.keyword"
       @input.native="change"      //注意使用elementUI组件要加上.native
   ></el-input>
 </el-form-item>
methods:{
	change:
	    debounce(()=>{
	      console.log(1111);
	      //todo
	    }, 500),
	//下面这种方式是不可行的,debounce返回了一个函数
	changes(){
      debounce(function(){
        console.log(1111)
      }, 500)      
    },
 }
 

这里要特别注意函数change的写法,必须这种change: 的写法,如果要使用change()要使用调用的方式,但最终有调用debounce的函数还是要另一种写法。

 @keyup.native="search"></el-input>
methods: {  
      // 加载到原型链上的lodash,在getRemote后取不到
    // 注意,这里debounce中的第一个参数,不能写成箭头函数,否则,取不到this
   getRemote: _.debounce(function () {
     console.log(111)
   }, 1000),
   search () {
     this.getRemote()
   }
 }

vue3中也有提及debounce的使用,感兴趣的可以去看看~
https://v3.vuejs.org/guide/data-methods.html#methods
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐