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) { |