前期回顾
类似这种效果,熟练操作键盘事件,多加一个过滤时间效果
前言:
写在最初,公司的项目有约一百个页面,我如何快速找到其中一个,甚至是封装组件中的点击事件
一种很快的适用小技巧,
一:复制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都变得更强