图示
须要应用到快捷键的vue页面
html
<el-form-item label="建单工夫"> <BaseTime @picked="(val) => timeRange = val" v-model="timeRange" ref="timeRange" /> </el-form-item> <span @click="shortcuts('today')">今日</span> <span @click="shortcuts('this-week')">本周</span> <span @click="shortcuts('this-month')">本月</span> <span @click="shortcuts('last-month')">上月</span> <el-form-item label="领取工夫"> <BaseTime @picked="(val) => timeRange2 = val" v-model="timeRange2" ref="timeRange2" /> </el-form-item> <span @click="shortcuts('this-quarter', 'timeRange2')">本季</span> <span @click="shortcuts('this-year', 'timeRange2')">本年</span> <!-- 阐明 1. BaseTime 是对 el-date-picker type="datetimerange" 以及其余雷同属性的封装，代码略 2. timeRange是数组，每个工夫区间后端应用2个字段接管。所以前端的命名就比拟随便，如果页面有多少个工夫区间，命名就是timeRange、timeRange1、timeRange2、timeRange3.... 3. 应用BaseTime，ref是必要的，须要调用组件的 @change 办法 4. 款式略 -->script
/** * 快捷键逻辑原本放在@/mixins/standard-list里的为了演示不便放在这里 * 其余代码省略**/export default { data() { timeRange: [], // 工夫区间---建单工夫 timeRange1: [], // 工夫区间---领取工夫 }, watch: { timeRange: { handler (newV) { if (newV instanceof Array) { this.searchData.createTimeBegin = newV[0]; this.searchData.createTimeEnd = newV[1]; } else { this.searchData.createTimeBegin = null; this.searchData.createTimeEnd = null; } } }, timeRange2: { handler (newV) { if (newV instanceof Array) { this.searchData.payTimeBegin = newV[0]; this.searchData.payTimeEnd = newV[1]; } else { this.searchData.payTimeBegin = null; this.searchData.payTimeEnd = null; } } }, }, methods: { // 日期快捷键（默认绑定timeRange） shortcuts(text, ref='timeRange'){ const start = new Date(); const end = new Date(); start.setHours(0);start.setMinutes(0);start.setSeconds(0); end.setHours(23); end.setMinutes(59); end.setSeconds(59); const month = start.getMonth()+1; // 0-11, 月份加1，不便和大月、小月口诀对应 switch (text) { case 'today': this.$refs[ref].val = [start, end]; this.$refs[ref].changeVal(); break; case 'this-week': const today = start.getDate(); // 1-31 const weekday = start.getDay() || 7; // 0-6, 若为0则改为7 start.setDate(today+(1-weekday)); end.setDate(today+(7-weekday)); this.$refs[ref].val = [start, end]; this.$refs[ref].changeVal(); break; case 'this-month': start.setDate(1); if (month===1 || month===3 || month===5 || month===7 || month===8 || month===10 ||month===12) { end.setDate(31); } if (month===4 || month===6 || month===9 || month===11) { end.setDate(30); } if (month===2) { const year = start.getFullYear(); if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) { end.setDate(29); } else { end.setDate(28); } } this.$refs[ref].val = [start, end]; this.$refs[ref].changeVal(); break; case 'last-month': const lastMonth = start.getMonth() - 1;// 0-11, 月份减1，失去上月，-1-10 if (lastMonth === -1) { const year = start.getFullYear(); start.setFullYear(year - 1); start.setMonth(11); end.setFullYear(year - 1); end.setMonth(11); end.setDate(31); // -1月份单写 } else { start.setMonth(lastMonth); end.setMonth(lastMonth); } start.setDate(1); const tem = lastMonth+1 if (tem ===1 || tem===3 || tem===5 || tem===7 || tem===8 || tem===10) { end.setDate(31); } if (tem===4 || tem===6 || tem===9 || tem===11) { end.setDate(30); } if (tem===2) { const year = start.getFullYear(); if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) { end.setDate(29); } else { end.setDate(28); } } this.$refs[ref].val = [start, end]; this.$refs[ref].changeVal(); break; case 'this-quarter': const quarter = Math.floor((month%3 === 0 ? ( month/3 ) : ( month/3 + 1 ))) start.setDate(1); if (quarter === 1) { start.setMonth(0); end.setMonth(2); end.setDate(31); } if (quarter === 2) { start.setMonth(3); end.setMonth(5); end.setDate(30); } if (quarter === 3) { start.setMonth(6); end.setMonth(8); end.setDate(30); } if (quarter === 4) { start.setMonth(9); end.setMonth(11); end.setDate(31); } this.$refs[ref].val = [start, end]; this.$refs[ref].changeVal(); break; case 'this-year': start.setMonth(0); start.setDate(1); end.setMonth(11); end.setDate(31); this.$refs[ref].val = [start, end]; this.$refs[ref].changeVal(); break; } }, }}