相關需求:
——————————————————————————————————————
- 每次點選搜尋都會生成一個歷史記錄
- 歷史記錄不能重複,以最新的查詢結果為準
- 要區分單程和往返(點選時候需要對應切換)
- 最多五條歷史記錄
- 可以左右滑動(better-scroll)
- 封裝一個單獨的可擴充套件的元件
業務程式碼:
——————————————————————————————————————
首先很簡單,就是把你需要的值存放在一個物件裡面,然後存放在sessionStorage裡面
這一塊是應用業務程式碼,跟封裝的元件沒有實質關係,只是應用元件
程式碼如下
元件程式碼
——————————————————————————————————————
現在重點封裝歷史記錄元件,直接上程式碼
首先是html模板程式碼,應該沒什麼難點
js程式碼,主要用到陣列去重,刪除,篩選
還有就是注意Json.parse()=>用來解析json字串的
Json.stringify()將一個物件或者陣列轉換成Json字串
最後就是應用該元件的時候,要用到父子元件間的通訊ref
呼叫父元件裡面的方法,如果每個頁面應用該元件都這樣寫addHistory方法,會有很多這重複性程式碼
應用程式碼
——————————————————————————————————————接下來就是應用了,所有的值都在sessionStorage物件裡面
列印item就可以拿個每個物件的值了
這裡應用比較複雜一下,暫時不管這些,反正拿到資料要看具體的業務需求,然後根據需求隨便你去玩。