Commit 030a522daa1a07d11248401747b1ad4afba4c120
1 parent
58cd4675
make picker close on blur
Showing
5 changed files
with
12 additions
and
5 deletions
Show diff stats
src/components/date-picker/panel/date-range.vue
src/components/date-picker/panel/date.vue
src/components/date-picker/panel/time-range.vue
| 1 | 1 | <template> |
| 2 | - <div :class="classes"> | |
| 2 | + <div :class="classes" @mousedown.prevent> | |
| 3 | 3 | <div :class="[prefixCls + '-body']"> |
| 4 | 4 | <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> |
| 5 | 5 | <div :class="[timePrefixCls + '-header']"> |
| ... | ... | @@ -205,4 +205,4 @@ |
| 205 | 205 | if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; |
| 206 | 206 | } |
| 207 | 207 | }; |
| 208 | -</script> | |
| 209 | 208 | \ No newline at end of file |
| 209 | +</script> | ... | ... |
src/components/date-picker/panel/time.vue
| 1 | 1 | <template> |
| 2 | - <div :class="[prefixCls + '-body-wrapper']"> | |
| 2 | + <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent> | |
| 3 | 3 | <div :class="[prefixCls + '-body']"> |
| 4 | 4 | <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div> |
| 5 | 5 | <div :class="[prefixCls + '-content']"> | ... | ... |
src/components/date-picker/picker.vue
| ... | ... | @@ -12,6 +12,7 @@ |
| 12 | 12 | :name="name" |
| 13 | 13 | @on-input-change="handleInputChange" |
| 14 | 14 | @on-focus="handleFocus" |
| 15 | + @on-blur="handleBlur" | |
| 15 | 16 | @on-click="handleIconClick" |
| 16 | 17 | @mouseenter.native="handleInputMouseenter" |
| 17 | 18 | @mouseleave.native="handleInputMouseleave" |
| ... | ... | @@ -290,6 +291,9 @@ |
| 290 | 291 | if (this.readonly) return; |
| 291 | 292 | this.visible = true; |
| 292 | 293 | }, |
| 294 | + handleBlur () { | |
| 295 | + this.visible = false; | |
| 296 | + }, | |
| 293 | 297 | handleInputChange (event) { |
| 294 | 298 | const oldValue = this.visualValue; |
| 295 | 299 | const value = event.target.value; |
| ... | ... | @@ -478,6 +482,9 @@ |
| 478 | 482 | if (this.picker) this.picker.resetView && this.picker.resetView(true); |
| 479 | 483 | this.$refs.drop.destroy(); |
| 480 | 484 | if (this.open === null) this.$emit('on-open-change', false); |
| 485 | + // blur the input | |
| 486 | + const input = this.$el.querySelector('input'); | |
| 487 | + if (input) input.blur(); | |
| 481 | 488 | } |
| 482 | 489 | }, |
| 483 | 490 | internalValue(val) { | ... | ... |