搜索清空回退功能以及分页功能
搜索清空回退功能
在搜索组件中完成此功能
a. 绑定键盘enter事件
@keyup.13 ="iconClick"
b. 在全局储存跳转到搜索页面前的路径backValue,监听input框的值,如果路径为搜索结果页面,且input框有内容,backValue不为空,则路由跳转回原页面
watch:{
inputValue(val){
if(this.$route.path === '/noSearchResult' && val === '' && this.backValue !== null){
this.$router.push(this.backValue);
return '';
}else {
return '';
}
}
分页功能
productData为原始数据,currentPage为当前页,slice返回当前页数据,length数组长度绑定组件的总长度
productDataList() {
let res = this.productData;
let length =this.productDataLength = this.productData.length;
let s = (this.currentPage-1)*8;
let data = res.slice(s,s+8);
return data;
}