diff --git a/examples/docs/time-picker.md b/examples/docs/time-picker.md index 6b7d58033..3b805db65 100644 --- a/examples/docs/time-picker.md +++ b/examples/docs/time-picker.md @@ -8,7 +8,7 @@ ## 固定时间点 提供几个固定的时间点供用户选择。 - +{{value}}
```html ``` @@ -57,7 +58,7 @@ ```html ``` @@ -75,7 +76,7 @@ ```html -
-
    -
  • -
-
-
-
    -
  • -
-
-
-
    -
  • -
+
+ {{hours}} +
+
    +
  • +
+
+
+
    +
  • +
+
+
+
    +
  • +
+
@@ -70,27 +73,28 @@ }, watch: { - hours(newVal, oldVal) { + hoursPrivate(newVal, oldVal) { if (!(newVal >= 0 && newVal <= 23)) { - this.hours = oldVal; + this.hoursPrivate = oldVal; } - this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80); + this.$refs.hour.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80); + this.$emit('change', { hours: newVal }); }, - minutes(newVal, oldVal) { + minutesPrivate(newVal, oldVal) { if (!(newVal >= 0 && newVal <= 59)) { - this.minutes = oldVal; + this.minutesPrivate = oldVal; } - this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80); + this.$refs.minute.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80); this.$emit('change', { minutes: newVal }); }, - seconds(newVal, oldVal) { + secondsPrivate(newVal, oldVal) { if (!(newVal >= 0 && newVal <= 59)) { - this.seconds = oldVal; + this.secondsPrivate = oldVal; } - this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80); + this.$refs.second.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80); this.$emit('change', { seconds: newVal }); } }, @@ -101,9 +105,17 @@ } }, + data() { + return { + hoursPrivate: 0, + minutesPrivate: 0, + secondsPrivate: 0 + }; + }, + methods: { focusEditor(type) { - const editor = this.$els[type + 'Editor']; + const editor = this.$refs[type + 'Editor']; if (editor) { editor.focus(); } @@ -114,7 +126,7 @@ return; } - this[type] = value.value >= 0 ? value.value : value; + this[type + 'Private'] = value.value >= 0 ? value.value : value; this.emitSelectRange(type); }, @@ -130,9 +142,9 @@ }, ajustScrollTop() { - this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80); - this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80); - this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80); + this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80); + this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80); + this.$refs.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80); } } }; diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index 032667605..0cc480b71 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/packages/date-picker/src/panel/date.vue @@ -26,7 +26,7 @@ type="text" class="el-date-picker__editor"> @@ -75,7 +75,7 @@ :disabled-date="disabledDate"> diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue index 6d9564061..02c7b8a51 100644 --- a/packages/date-picker/src/panel/time-range.vue +++ b/packages/date-picker/src/panel/time-range.vue @@ -8,7 +8,7 @@
开始时间
结束时间
@@ -34,12 +34,6 @@ }, props: { - date: { - default() { - return new Date(); - } - }, - format: { default: 'HH:mm:ss' }, @@ -61,51 +55,18 @@ } }, + data() { + return { + date: new Date(), + hours: 0, + minutes: 0, + seconds: 0 + }; + }, + computed: { showSeconds() { return (this.format || '').indexOf('ss') !== -1; - }, - - hours: { - get() { - if (this.date) { - return this.date.getHours(); - } - return 0; - }, - set(hours) { - if (this.date) { - this.date.setHours(hours); - } - } - }, - - minutes: { - get() { - if (this.date) { - return this.date.getMinutes(); - } - return 0; - }, - set(minutes) { - if (this.date) { - this.date.setMinutes(minutes); - } - } - }, - - seconds: { - get() { - if (this.date) { - return this.date.getSeconds(); - } - return 0; - }, - set(seconds) { - if (this.date) { - this.date.setSeconds(seconds); - } - } } }, @@ -115,9 +76,19 @@ }, handleChange(date) { - if (date.hours !== undefined) this.hours = date.hours; - if (date.minutes !== undefined) this.minutes = date.minutes; - if (date.seconds !== undefined) this.seconds = date.seconds; + if (date.hours !== undefined) { + this.date.setHours(date.hours); + this.hours = this.date.getHours(); + } + if (date.minutes !== undefined) { + this.date.setMinutes(date.minutes); + this.minutes = this.date.getMinutes(); + } + if (date.seconds !== undefined) { + this.date.setSeconds(date.seconds); + this.seconds = this.date.getSeconds(); + } + this.handleConfirm(true); }, @@ -147,7 +118,13 @@ } }, - ready() { + created() { + this.hours = this.date.getHours(); + this.minutes = this.date.getMinutes(); + this.seconds = this.date.getSeconds(); + }, + + mounted() { this.$refs.spinner.selectableRange = this.selectableRange; this.$nextTick(() => this.handleConfirm(true, true)); } diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index b0fdc217a..fafe13347 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -1,31 +1,29 @@