Vue历史城市搜索记录查询(携程H5效果)

相关需求：

——————————————————————————————————————

• 每次点击搜索都会生成一个历史记录
  
• 历史记录不能重复，以最新的查询结果为准
  
• 要区分单程和往返(点击时候需要对应切换)
  
• 最多五条历史记录
  
• 可以左右滑动(better-scroll)
  
• 封装一个单独的可扩展的组件

业务代码：

——————————————————————————————————————

首先很简单，就是把你需要的值存放在一个对象里面，然后存放在sessionStorage里面

这一块是应用业务代码，跟封装的组件没有实质关系，只是应用组件

代码如下

组件代码

——————————————————————————————————————

现在重点封装历史记录组件，直接上代码

首先是html模板代码，应该没什么难点

js代码，主要用到数组去重，删除，筛选

还有就是注意Json.parse()=>用来解析json字符串的

Json.stringify()将一个对象或者数组转换成Json字符串

最后就是应用该组件的时候，要用到父子组件间的通信ref

调用父组件里面的方法，如果每个页面应用该组件都这样写addHistory方法，会有很多这重复性代码

应用代码

——————————————————————————————————————接下来就是应用了，所有的值都在sessionStorage对象里面

打印item就可以拿个每个对象的值了

这里应用比较复杂一下，暂时不管这些，反正拿到数据要看具体的业务需求，然后根据需求随便你去玩。

转载于:https://juejin.im/post/5a9dfd97518825555d46beb3