?前期回顧? ??????

?30秒學會 —— 《獲取驗證碼基本操作》_0.活在風浪里的博客-CSDN博客_獲取驗證碼前期回顧 懶人必備 —— 時間神器 moment_0.活在風浪里的博客-CSDN博客親測好用，及其好使的插件，開發懶人必整，就算是自己可以寫，一大堆代碼，真的要寫嗎？https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501先說先驗證碼思路，其實很簡單，1、前端觸發獲取驗證碼,同步顯示有效驗證倒計時;2、后臺通過代理平臺發送驗證短信;解釋：你在頁面觸發驗證碼請求后，后臺接...https://blog.csdn.net/m0_57904695/article/details/123781413?spm=1001.2014.3001.5501

?

類似這種效果，熟練操作鍵盤事件，多加一個過濾時間效果

前言：

寫在最初，公司的項目有約一百個頁面，我如何快速找到其中一個，甚至是封裝組件中的點擊事件

一種很快的適用小技巧，

一：復制url在代碼中，Ctrl+p 快速找到該頁面

?

二：假如你要找這個按鈕，是不是有一個百度搜索文字，記住它

打開vsCode，在側邊點擊右鍵，勾選上Search，默認是有的，如果沒有在勾選上

?

?

?

?效果如動圖：

解釋：

<template><div id="home"><div class="input_box" :class="isShow == true ? 'inputBlue' : 'inputEee'"><inputtype="text"nameid="input"v-model="query"@focus="isShow = true"@keydown.enter="isShow = false"@blur="isShow = false"@keydown="chose($event)"/><ul v-show="isShow" :class="isShow == true ? '_active' : ''"><liv-for="(item, index) in history":key="index":class="{ active: cur == index }"@mouseenter="changeHover(index)">{{ item.query }}---{{ item.time | timeFilters }}</li></ul></div><button @click="addLocal">百度搜索</button></div> </template><script> export default {data() {return {query: "", //雙向數據綁定isShow: false, //標記是否搜索記錄顯示history: [], //存儲歷史數組cur: 0, //標記當前是在那個歷史上,實現上下鍵};},methods: {// 點擊百度搜索事件addLocal() {this.history.push({ query: this.query, time: Date.now() });localStorage.setItem("history", JSON.stringify(this.history));},// 鼠標移入事件changeHover(i) {// 移入誰賦值下標給cur變量，數組中當前下標的賦值query,使其顏色顯示// 上面寫了cur == index，會顯示active類名this.cur = i;this.query = this.history[this.cur].query;},// enter事件chose(e) {// console.log(e);// debuggerif (e.keyCode === 38) {//左37 上38 右39 下40// 表示 點擊的是鍵盤的up鍵if (this.cur === 0) {this.cur = this.history.length - 1;} else {this.cur--;}this.query = this.history[this.cur].query;} else if (e.keyCode === 40) {if (this.cur === this.history.length - 1) {this.cur = 0;} else {this.cur++;}this.query = this.history[this.cur].query;}},},// 過濾器filters: {timeFilters(data) {//ms是接受的item.time//將字符串轉換成時間格式let result;let timePublish = new Date(data);let timeNow = new Date();let minute = 1000 * 60;let hour = minute * 60;let day = hour * 24;let month = day * 30;let year = month * 12;let diffValue = timeNow - timePublish;let diffMonth = diffValue / month;let diffWeek = diffValue / (7 * day);let diffDay = diffValue / day;let diffHour = diffValue / hour;let diffMinute = diffValue / minute;let diffYear = diffValue / year;if (diffValue < minute) {result = "剛剛發表";} else if (diffYear > 1) {result = parseInt(diffYear) + "年前";} else if (diffMonth > 1) {result = parseInt(diffMonth) + "月前";} else if (diffWeek > 1) {result = parseInt(diffWeek) + "周前";} else if (diffDay > 1) {result = parseInt(diffDay) + "天前";} else if (diffHour > 1) {result = parseInt(diffHour) + "小時前";} else if (diffMinute > 1) {result = parseInt(diffMinute) + "分鐘前";} else {result = "剛剛發表";}return result;},},created() {this.history = JSON.parse(localStorage.getItem("history")) || [];}, }; </script><style lang="scss" scoped> * {margin: 0;padding: 0;box-sizing: border-box; } #home {margin: 200px;height: 100%;display: flex;.input_box {width: 600px;min-height: 50px;border: 2px solid #eeeeee;outline: none;#input {width: 100%;height: 50px;padding-left: 15px;border: none;outline: none;}ul > li {height: 40px;margin-bottom: 5px;padding: 0 10px;line-height: 40px;}.active {background-color: #eeeeee;}}button {width: 130px;height: 55px;background-color: #4e6ef2;color: #fff;font-family: "Courier New", Courier, monospace;outline: none;border: none;border-radius:0 5px 5px 0;margin-left: -2px;}.inputBlue {border: 2px solid #4e6ef2;}.inputEee {border: 2px solid #eeeeee;}._active {border-top: 1px solid #cccccc;box-sizing: border-box;margin: 0 10px;} } </style>

?

結語：

祝大家在2022都變得更強?

?

?

總結

以上是生活随笔為你收集整理的模仿百度搜索 ：上下翻动、带有时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。