From c1e8cb9146a25858b871a44cd59a2896192279da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 26 Dec 2019 11:24:27 +0800 Subject: [PATCH] =?UTF-8?q?feat(Calendar):=20add=20show-confirm=20prop?= =?UTF-8?q?=E3=80=81confirm=20event?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/calendar/README.zh-CN.md | 51 ++++++++++++++++++---------------- src/calendar/demo/index.vue | 54 ++++++++++++++++++++++++++---------- src/calendar/index.js | 46 +++++++++++++++++++++--------- src/calendar/index.less | 1 + 4 files changed, 101 insertions(+), 51 deletions(-) diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 49270f25b..367960864 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -17,19 +17,12 @@ Vue.use(Calendar); ### 选择单个日期 -下面演示了结合单元格来使用日历组件的用法，点击单元格后唤起日历组件。 +下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发`confirm`事件 ```html - + - + ``` ```js @@ -37,14 +30,19 @@ export default { data() { return { // 当前选中的日期 - selectedDate: '', - showCalendar: false + date: '', + show: false }; }, - computed: { - onSelect(date) { - this.selectedDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; + methods: { + formatDate() { + return `${date.getMonth() + 1}/${date.getDate()}`; + }, + onConfirm(date) { + const [start, end] = date; + this.show = false; + this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`; } } } @@ -52,23 +50,26 @@ export default { ### 选择日期区间 -设置`type`为`range`后可以选择日期区间，此时`select`事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。 +设置`type`为`range`后可以选择日期区间，此时`confirm`事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。 ```html - + + + ``` ```js export default { data() { return { - selectedDate: [] + show: false, + date: [] }; }, - methods: { - onSelect(date) { - this.selectedDate = date; + onConfirm(date) { + this.show = false; + this.date = date; } } } @@ -87,17 +88,19 @@ export default { | max-date | 最大日期 | *Date* | 当前日期的六个月后 | - | | default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - | | row-height | 日期所在行的高度 | *number* | `64` | - | -| button-text | 确认按钮的文字 | *string* | `确定` | - | -| button-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - | | poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - | | show-mark | 是否显示月份背景水印 | *boolean* | `true` | - | +| show-confirm | 是否展示确认按钮 | *boolean* | `false` | - | | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - | +| confirm-text | 确认按钮的文字 | *string* | `确定` | - | +| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - | ### Events | 事件名 | 说明 | 回调参数 | |------|------|------| -| select | 确认选择日期时触发 | value: Date \| Date[] | +| select | 点击任意日期时触发 | value: Date \| Date[] | +| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | value: Date \| Date[] | ### Slots diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue index 9788491fe..38b24059d 100644 --- a/src/calendar/demo/index.vue +++ b/src/calendar/demo/index.vue @@ -8,25 +8,42 @@ @click="toggle('selectSingleDate', true)" /> - - + - + + + + + + + @@ -35,16 +52,19 @@ export default { i18n: { 'zh-CN': { selectSingleDate: '选择单个日期', - selectDateRange: '选择日期区间' + selectDateRange: '选择日期区间', + showConfirm: '展示确认按钮' }, 'en-US': { selectSingleDate: 'Select Single Date', - selectDateRange: 'Select Date Range' + selectDateRange: 'Select Date Range', + showConfirm: 'Show Confirm Button' } }, data() { return { + showConfirm: false, date: { selectSingleDate: null, selectDateRange: [] @@ -57,8 +77,14 @@ export default { }, methods: { - toggle(type, show) { + toggle(type, show, setting) { this.show[type] = show; + + if (setting === 'showConfirm') { + this.showConfirm = true; + } else { + this.showConfirm = false; + } }, formatDate(date) { @@ -80,7 +106,7 @@ export default { } }, - onSelect(date, type) { + onConfirm(date, type) { this.date[type] = date; this.show[type] = false; } diff --git a/src/calendar/index.js b/src/calendar/index.js index 1af30bf03..2b067b935 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -20,9 +20,10 @@ export default createComponent({ props: { title: String, value: Boolean, - buttonText: String, defaultDate: [Date, Array], - buttonDisabledText: String, + showConfirm: Boolean, + confirmText: String, + confirmDisabledText: String, type: { type: String, default: 'single' @@ -78,6 +79,16 @@ export default createComponent({ } while (compareMonth(cursor, this.maxDate) !== 1); return months; + }, + + buttonDisabled() { + if (this.type === 'single') { + return !this.currentDate; + } + + if (this.type === 'range') { + return !this.currentDate[0] || !this.currentDate[1]; + } } }, @@ -152,8 +163,7 @@ export default createComponent({ const { date } = item; if (this.type === 'single') { - this.currentDate = date; - this.$emit('select', date); + this.select(date, true); } if (this.type === 'range') { @@ -163,14 +173,14 @@ export default createComponent({ const compareToStart = compareDay(date, startDay); if (compareToStart === 1) { - this.currentDate = [startDay, date]; + this.select([startDay, date], true); } if (compareToStart === -1) { - this.currentDate = [date, null]; + this.select([date, null]); } } else { - this.currentDate = [date, null]; + this.select([date, null]); } } }, @@ -179,8 +189,17 @@ export default createComponent({ this.$emit('input', val); }, - onConfirmRange() { + select(date, complete) { + this.currentDate = date; this.$emit('select', this.currentDate); + + if (complete && !this.showConfirm) { + this.onConfirm(); + } + }, + + onConfirm() { + this.$emit('confirm', this.currentDate); }, genMonth(date, index) { @@ -208,18 +227,19 @@ export default createComponent({ return slot; } - if (this.type === 'range') { - const disabled = !this.currentDate[1]; - const text = disabled ? this.buttonDisabledText : this.buttonText; + if (this.showConfirm) { + const text = this.buttonDisabled + ? this.confirmDisabledText + : this.confirmText; return ( diff --git a/src/calendar/index.less b/src/calendar/index.less index 7803db958..bfbb60706 100644 --- a/src/calendar/index.less +++ b/src/calendar/index.less @@ -52,6 +52,7 @@ position: relative; display: flex; flex-wrap: wrap; + user-select: none; } &__month-mark {