模仿百度搜索 ：上下翻动、带有时间

 前期回顾        

 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'">
      <input
        type="text"
        name
        id="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' : ''">
        <li
          v-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);
     // debugger
      if (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都变得更强