如下图，利用 vue+elementUI 实现一个日期快选的组件。
在这引用 dateUtil.js 工具包，参考：
/weixin_43930421/article/details/124745006
代码实现
在 components 文件目录新建 DateSelect.vue 文件。
<template><el-popover v-model="showPopover"style="padding:8px 30px;border:1px solid #f0f0f0;margin:0 20px"><div style="padding:20px 5px"><p>选择日期</p><div style="margin:10px 20px 30px 20px"><el-date-picker v-model="beginDate"format="yyyy-MM-dd"value-format="yyyy-MM-dd"type="date"style="width:150px;font-size:12px;padding-left:3px;"placeholder="开始时间"></el-date-picker>- <el-date-picker v-model="finalDate"format="yyyy-MM-dd"value-format="yyyy-MM-dd"type="date"style="width:150px;font-size:12px;padding-left:3px;"placeholder="结束时间"></el-date-picker></div><p>快捷日期</p><div style="margin-top:30px"><el-row><el-col :span="12"><el-button type="text"@click="setDay(0)">今天</el-button></el-col><el-col :span="12"><el-button type="text"@click="setDay(-1, true)">昨天</el-button></el-col></el-row><el-row><el-col :span="12"><el-button type="text"@click="setDay(-7)">过去7天</el-button></el-col><el-col :span="12"><el-button type="text"@click="setDay(-14)">过去14天</el-button></el-col></el-row><el-row><el-col :span="12"><el-button type="text"@click="setDay(-30)">过去30天</el-button></el-col><el-col :span="12"><el-button type="text"class="text-red"@click="clear">清空</el-button></el-col></el-row></div><hr style="border:1px solid #f0f0f0;margin:20px;" /><el-button type="primary"@click="showPopover = false;handleConfirm()">确定</el-button><el-button @click="showPopover = false">取消</el-button></div><span slot="reference"style="color:#999">{{startDate?startDate:'选择开始时间'}} - {{endDate?endDate:'选择结束时间'}}</span></el-popover></template><script>import dateUtil from 'utils/dateutil.js'export default {props: {startDate: String,endDate: String},data() {return {beginDate: '',finalDate: '',showPopover: false}},created() {},computed: {},methods: {handleConfirm() {let value = {startDate: this.beginDate, endDate: this.finalDate }this.$emit('afterDateSelect', value)},clear() {this.beginDate = ''this.finalDate = ''},// 过去几天setDay(day, isSingleDay) {this.beginDate = dateUtil.getDay(day)if (isSingleDay) {this.finalDate = dateUtil.getDay(day)} else {this.finalDate = dateUtil.getDay(0)}}},mounted() {this.beginDate = this.startDate ? this.startDate : dateUtil.getDay(0)this.finalDate = this.endDate ? this.endDate : dateUtil.getDay(0)}}</script>
参数说明
