【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
作者:smile.轉角
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
欢迎关注我,一起进步!扫描下方二维码即可加我QQ
![](https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg)