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
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="classes"> | 2 | + <div :class="classes" @mousedown.prevent> |
| 3 | <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> | 3 | <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> |
| 4 | <div | 4 | <div |
| 5 | :class="[prefixCls + '-shortcut']" | 5 | :class="[prefixCls + '-shortcut']" |
src/components/date-picker/panel/date.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="classes"> | 2 | + <div :class="classes" @mousedown.prevent> |
| 3 | <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> | 3 | <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> |
| 4 | <div | 4 | <div |
| 5 | :class="[prefixCls + '-shortcut']" | 5 | :class="[prefixCls + '-shortcut']" |
src/components/date-picker/panel/time-range.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="classes"> | 2 | + <div :class="classes" @mousedown.prevent> |
| 3 | <div :class="[prefixCls + '-body']"> | 3 | <div :class="[prefixCls + '-body']"> |
| 4 | <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> | 4 | <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> |
| 5 | <div :class="[timePrefixCls + '-header']"> | 5 | <div :class="[timePrefixCls + '-header']"> |
| @@ -205,4 +205,4 @@ | @@ -205,4 +205,4 @@ | ||
| 205 | if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; | 205 | if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; |
| 206 | } | 206 | } |
| 207 | }; | 207 | }; |
| 208 | -</script> | ||
| 209 | \ No newline at end of file | 208 | \ No newline at end of file |
| 209 | +</script> |
src/components/date-picker/panel/time.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="[prefixCls + '-body-wrapper']"> | 2 | + <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent> |
| 3 | <div :class="[prefixCls + '-body']"> | 3 | <div :class="[prefixCls + '-body']"> |
| 4 | <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div> | 4 | <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div> |
| 5 | <div :class="[prefixCls + '-content']"> | 5 | <div :class="[prefixCls + '-content']"> |
src/components/date-picker/picker.vue
| @@ -12,6 +12,7 @@ | @@ -12,6 +12,7 @@ | ||
| 12 | :name="name" | 12 | :name="name" |
| 13 | @on-input-change="handleInputChange" | 13 | @on-input-change="handleInputChange" |
| 14 | @on-focus="handleFocus" | 14 | @on-focus="handleFocus" |
| 15 | + @on-blur="handleBlur" | ||
| 15 | @on-click="handleIconClick" | 16 | @on-click="handleIconClick" |
| 16 | @mouseenter.native="handleInputMouseenter" | 17 | @mouseenter.native="handleInputMouseenter" |
| 17 | @mouseleave.native="handleInputMouseleave" | 18 | @mouseleave.native="handleInputMouseleave" |
| @@ -290,6 +291,9 @@ | @@ -290,6 +291,9 @@ | ||
| 290 | if (this.readonly) return; | 291 | if (this.readonly) return; |
| 291 | this.visible = true; | 292 | this.visible = true; |
| 292 | }, | 293 | }, |
| 294 | + handleBlur () { | ||
| 295 | + this.visible = false; | ||
| 296 | + }, | ||
| 293 | handleInputChange (event) { | 297 | handleInputChange (event) { |
| 294 | const oldValue = this.visualValue; | 298 | const oldValue = this.visualValue; |
| 295 | const value = event.target.value; | 299 | const value = event.target.value; |
| @@ -478,6 +482,9 @@ | @@ -478,6 +482,9 @@ | ||
| 478 | if (this.picker) this.picker.resetView && this.picker.resetView(true); | 482 | if (this.picker) this.picker.resetView && this.picker.resetView(true); |
| 479 | this.$refs.drop.destroy(); | 483 | this.$refs.drop.destroy(); |
| 480 | if (this.open === null) this.$emit('on-open-change', false); | 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 | internalValue(val) { | 490 | internalValue(val) { |