From c9964d5759e4e1fd95e5b7c97b3512fd37630925 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Wed, 25 Dec 2019 11:09:01 +0800 Subject: [PATCH] chore(Calendar): code review --- src/calendar/README.zh-CN.md | 6 +- src/calendar/{ => components}/Header.js | 4 +- src/calendar/{ => components}/Month.js | 4 +- src/calendar/index.js | 75 ++++++++++++------------- 4 files changed, 44 insertions(+), 45 deletions(-) rename src/calendar/{ => components}/Header.js (90%) rename src/calendar/{ => components}/Month.js (94%) diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 735da40e7..58e57889e 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -32,14 +32,14 @@ Vue.use(Calendar); | title | 日历标题 | `string` | - | - | | min-date | 最小日期 | `Date` | 当前日期 | - | | max-date | 最大日期 | `Date` | 当前日期的六个月后 | - | -| confirm-text | 选择日期区间时，确认按钮的文字 | `string` | `确定` | - | -| confirm-disabled-text | 选择日期区间时，确认按钮处于禁用状态时的文字 | `string` | `确定` | - | +| button-text | 选择日期区间时，确认按钮的文字 | `string` | `确定` | - | +| button-disabled-text | 选择日期区间时，确认按钮处于禁用状态时的文字 | `string` | `确定` | - | ### Events | 事件名 | 说明 | 回调参数 | |------|------|------| -| select | 选择日期时触发 | value: Date | +| select | 选择日期时触发 | value: Date | Date[] | ### Slots diff --git a/src/calendar/Header.js b/src/calendar/components/Header.js similarity index 90% rename from src/calendar/Header.js rename to src/calendar/components/Header.js index db590abed..8a4519af2 100644 --- a/src/calendar/Header.js +++ b/src/calendar/components/Header.js @@ -1,5 +1,5 @@ -import { createNamespace } from '../utils'; -import { t, bem, formatMonthTitle } from './utils'; +import { createNamespace } from '../../utils'; +import { t, bem, formatMonthTitle } from '../utils'; const [createComponent] = createNamespace('calendar-header'); diff --git a/src/calendar/Month.js b/src/calendar/components/Month.js similarity index 94% rename from src/calendar/Month.js rename to src/calendar/components/Month.js index 290d74481..faf6c26e0 100644 --- a/src/calendar/Month.js +++ b/src/calendar/components/Month.js @@ -1,5 +1,5 @@ -import { createNamespace } from '../utils'; -import { t, bem } from './utils'; +import { createNamespace } from '../../utils'; +import { t, bem } from '../utils'; const [createComponent] = createNamespace('calendar-month'); diff --git a/src/calendar/index.js b/src/calendar/index.js index b55b78718..c9f36a60d 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -9,16 +9,17 @@ import { createComponent, formatMonthTitle } from './utils'; -import Month from './Month'; -import Header from './Header'; + import Button from '../button'; +import Month from './components/Month'; +import Header from './components/Header'; export default createComponent({ props: { title: String, value: [Date, Array], - confirmText: String, - confirmDisabledText: String, + buttonText: String, + buttonDisabledText: String, type: { type: String, default: 'single' @@ -30,7 +31,7 @@ export default createComponent({ }, maxDate: { type: Date, - default: () => { + default() { const now = new Date(); return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()); }, @@ -49,8 +50,8 @@ export default createComponent({ months() { const months = []; const { minDate, maxDate } = this; - const cursor = new Date(minDate); + cursor.setDate(1); do { @@ -99,25 +100,27 @@ export default createComponent({ } if (type === 'range') { - if (!currentValue[0]) { + const [startDay, endDay] = this.currentValue; + + if (!startDay) { return; } - const compareWithStart = compareDay(day, currentValue[0]); - if (compareWithStart === 0) { + const compareToStart = compareDay(day, startDay); + if (compareToStart === 0) { return 'start'; } - if (!currentValue[1]) { + if (!endDay) { return; } - const compareWithEnd = compareDay(day, currentValue[1]); - if (compareWithEnd === 0) { + const compareToEnd = compareDay(day, endDay); + if (compareToEnd === 0) { return 'end'; } - if (compareWithStart > 0 && compareWithEnd < 0) { + if (compareToStart > 0 && compareToEnd < 0) { return 'middle'; } } @@ -146,19 +149,6 @@ export default createComponent({ return days; }, - genMonth(month, index) { - return ( - - ); - }, - onScroll() { const scrollTop = getScrollTop(this.$refs.body); const monthsHeight = this.$refs.month.map(item => item.height); @@ -183,24 +173,20 @@ export default createComponent({ } if (this.type === 'range') { - const startDay = this.currentValue[0]; - const endDay = this.currentValue[1]; + const [startDay, endDay] = this.currentValue; - if (startDay && endDay) { - this.$emit('input', [date, null]); - return; - } + if (startDay && !endDay) { + const compareToStart = compareDay(date, startDay); - if (startDay) { - const compareWithStart = compareDay(date, startDay); - - if (compareWithStart === 1) { + if (compareToStart === 1) { this.$emit('input', [startDay, date]); } - if (compareWithStart === -1) { + if (compareToStart === -1) { this.$emit('input', [date, null]); } + } else { + this.$emit('input', [date, null]); } } }, @@ -210,10 +196,23 @@ export default createComponent({ this.$emit('select', this.currentValue); }, + genMonth(month, index) { + return ( + + ); + }, + genFooter() { if (this.type === 'range') { const disabled = !this.currentValue[1]; - const text = disabled ? this.confirmDisabledText : this.confirmText; + const text = disabled ? this.buttonDisabledText : this.buttonText; return (