【vue】vue +element 搭建项目,实现实时输入效果时停止输入后发送请求

1.实现的效果

  输入关键字后,根据输入的关键字实时显示搜索的结果,按回车键时也进行搜索

2.原理:

  • 通过时间戳+定时器+一个全局变量实现。代码量很少比较易懂。
  • 用户输入时触发keyup事件,并调用事件函数。事件函数被调用后会生成对应的event.timeStamp,这个值在事件函数体内一直不会变。

  • 将event.timeStamp赋给全局中定义的this.lastTimeStamp。这个this.astTimeStamp是一个全局的变量,这样这个值在每次事件触发时都会被改变。

  • 如果在1s内,this.lastTimeStamp这个值被事件函数重新赋值修改,则this.lastTimeStamp != event.timeStamp;说明还在输入。不走ajax请求。

  • 若1s后不再触发事件,不再调用事件函数。this.lastTimeStamp被本次事件函数赋值一次后,没有再被改写。则说明,此时不再输入或有间歇。this.lastTimeStamp==event.timeStamp。发送ajax请求。

3.html

<el-input placeholder="请输入内容"  class="input-with-select marign-sm-b" clearable v-model="searchKey"  @keyup.native="onkeyup($event)" @keyup.enter.native="onenter">
  <el-button slot="append" icon="el-icon-search" @click.native="onenter"></el-button>
</el-input>

4.js

 export default {
data() {
return {
searchKey: '',//搜索关键字
lastTimeStamp: 0,//标记当前事件函数的时间戳
}
},
created(){
},
methods: {
/**
* des:搜索的回车事件
*/
onenter(){
console.log('发送请求!!!');
}, /**
* des:用户在输入状态下不发送请求,等停止输入后发送请求
*/
onkeyup(event){
if(event.keyCode != 13){//除回车键外
//标记当前事件函数的时间戳
this.lastTimeStamp = event.timeStamp;
setTimeout(() => {
//1s后比较二者是否还相同(因为只要还有事件触发,lastTimeStamp就会被改写,不再是当前事件函数的时间戳)
if(this.lastTimeStamp == event.timeStamp){
console.log('发送请求');
}
}, 1000);
} },
},
}

参考链接:

个人资料:

作者:smile.轉角

QQ:493177502

上一篇:将UE添加到右键菜单


下一篇:Linux环境安装Eclipse工具开发