时间过滤组件.png
可以动态设置默认时间、el-picker的size、label。查询按钮是父组件中的，它们都在el-form中。因为最近做的项目用el-form比较多，也可以不在哈哈哈哈哈哈
组件中一定需要默认值的，我把它写成一个公共、获取时间的方法，别的地方用时也很方便~
utils文件夹中的utils.js内容 ↓
// 获取时间
export function getTime() {
// 时间戳 ---- 三天前、一周前
let stamp3 = new Date().getTime() - 24 * 3600 * 1000 * 3;
let stamp7 = new Date().getTime() - 24 * 3600 * 1000 * 7;
let year1 = new Date().getFullYear();
let month = new Date().getMonth();
let month1 = new Date().getMonth() + 1;
let day1 = new Date().getDate();
let year3 = new Date(stamp3).getFullYear();
let month3 = new Date(stamp3).getMonth() + 1;
let day3 = new Date(stamp3).getDate();
let year7 = new Date(stamp7).getFullYear();
let month7 = new Date(stamp7).getMonth() + 1;
let day7 = new Date(stamp7).getDate();
// 这块儿一定有更好用的方法。。可是我不会。。。。用了同一个函数
month1 = addZero(month1);
day1 = addZero(day1);
month3 = addZero(month3);
day3 = addZero(day3);
month7 = addZero(month7);
day7 = addZero(day7);
// 当天
let currentDay = `${year1}-${month1}-${day1}`;
// 三天前
let threeDaysAgo = `${year3}-${month3}-${day3}`;
// 一周前
let sevenDaysAgo = `${year7}-${month7}-${day7}`;
// 一个月前
let oneMonthAgo = `${year1}-${month}-${day1}`;
return {
currentDay,
threeDaysAgo,
sevenDaysAgo,
oneMonthAgo
}
}
// 补零儿
export function addZero(value) {
if (value <= 9) {
return `0${value}`
} else {
return value;
}
}
timeFilter.vue内容 ↓
<template>
<div class="container-timefilter">
<!-- pickerLabel为动态label。。。。 -->
<span class="title-label">{{pickerLabel}}</span>
<el-date-picker
v-model="startTime"
placeholder="开始日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:size="size"
@change="onChangeStart"
:picker-options="pickerOptions"
></el-date-picker>
-
<el-date-picker
v-model="endTime"
placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:size="size"
@change="onChangeEnd"
:picker-options="pickerOptions"
></el-date-picker>
<!-- change是picker框的值发生改变时触发的方法 -->
</div>
</template>
<script>
// 这是一个获取时间的方法 当天日期，三天前日期，一周前日期，一个月前日期
import {getTime} from "@/utils/utils";
export default {
props: {
startTime: {
type: String,
default: getTime().threeDaysAgo
},
endTime: {
type: String,
default: getTime().currentDay
},
pickerLabel: {
type: String,
default: "日期："
},
size: {
type: String,
default: "mini"
},
// 这俩是picker的设置，将当天后的日期设置为禁用
pickerOptions: {}
},
methods: {
// 下面俩方法差不多意思，即，起始日期不得晚于结束日期
onChangeStart(e) {
let startTimeStamp = new Date(e).getTime();
let endTimeStamp = new Date(this.endTime).getTime()
if(startTimeStamp > endTimeStamp) {
this.$message("起始日期不得晚于结束日期")
}
// 在picker内的值发生改变时，需要用到组件通信中，子传父的方法。
// 具体方法看官网。。我可说不清哈哈哈哈哈哈
this.$emit("start",e)
},
onChangeEnd(e) {
let startTimeStamp = new Date(this.startTime).getTime();
let endTimeStamp = new Date(e).getTime();
if(startTimeStamp > endTimeStamp) {
this.$message("结束日期不得早于起始日期");
}
this.$emit("end",e)
}
},
};
</script>
<style lang="scss" scoped>
.el-input {
width: 140px;
}
// label的样式设置，与elementui的label字体设置为一样的
.title-label {
color: #606266;
font-size: 14px;
font-weight: bold;
}
</style>
父组件.vue ↓
<template>
<div class="container">
<el-form inline size="mini">
<el-form-item>
<time-filter
:pickerOptions="pickerOptions"
:startTime="startTime"
:endTime="endTime"
@start="changeStart"
@end="changeEnd"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleFilter" type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import TimeFilter from "@/components/TimeFilter";
import { getTime } from "@/utils/utils";
export default {
components: {
TimeFilter,
},
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
startTime: getTime().oneMonthAgo,
endTime: getTime().currentDay,
};
},
methods: {
handleFilter() {
if (
new Date(this.startTime).getTime() > new Date(this.endTime).getTime()
) {
this.$message("结束日期不得早于起始日期");
return;
}
console.log(this.startTime,"startTime");
console.log(this.endTime,"endTime")
},
// timeFilter
changeStart(v) {
this.startTime = v;
},
changeEnd(v) {
this.endTime = v;
},
},
};
</script>
<style lang="scss" scoped>
.container {
padding: 20px;
}
</style>
组件通信太烦了（哭。。。。）
爸特感觉一个时间检索搞完好像思路清晰了很多。冒昧总结一下大概就是 👇
父中用 :名称1 @名称2
子中用 props接名称1 this.$emit("名称2",value)
emmm写得有亿点点乱。。。。我脑子是清楚的哈哈哈哈哈哈哈哈哈哈哈哈吧？
