make picker close on blur

This commit is contained in:
Sergio Crisostomo 2017-09-21 08:22:05 +02:00
parent 58cd467591
commit 030a522daa
5 changed files with 12 additions and 5 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="classes"> <div :class="classes" @mousedown.prevent>
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
<div <div
:class="[prefixCls + '-shortcut']" :class="[prefixCls + '-shortcut']"

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="classes"> <div :class="classes" @mousedown.prevent>
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
<div <div
:class="[prefixCls + '-shortcut']" :class="[prefixCls + '-shortcut']"

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="classes"> <div :class="classes" @mousedown.prevent>
<div :class="[prefixCls + '-body']"> <div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']"> <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
<div :class="[timePrefixCls + '-header']"> <div :class="[timePrefixCls + '-header']">
@ -205,4 +205,4 @@
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
} }
}; };
</script> </script>

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="[prefixCls + '-body-wrapper']"> <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
<div :class="[prefixCls + '-body']"> <div :class="[prefixCls + '-body']">
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div> <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
<div :class="[prefixCls + '-content']"> <div :class="[prefixCls + '-content']">

View file

@ -12,6 +12,7 @@
:name="name" :name="name"
@on-input-change="handleInputChange" @on-input-change="handleInputChange"
@on-focus="handleFocus" @on-focus="handleFocus"
@on-blur="handleBlur"
@on-click="handleIconClick" @on-click="handleIconClick"
@mouseenter.native="handleInputMouseenter" @mouseenter.native="handleInputMouseenter"
@mouseleave.native="handleInputMouseleave" @mouseleave.native="handleInputMouseleave"
@ -290,6 +291,9 @@
if (this.readonly) return; if (this.readonly) return;
this.visible = true; this.visible = true;
}, },
handleBlur () {
this.visible = false;
},
handleInputChange (event) { handleInputChange (event) {
const oldValue = this.visualValue; const oldValue = this.visualValue;
const value = event.target.value; const value = event.target.value;
@ -478,6 +482,9 @@
if (this.picker) this.picker.resetView && this.picker.resetView(true); if (this.picker) this.picker.resetView && this.picker.resetView(true);
this.$refs.drop.destroy(); this.$refs.drop.destroy();
if (this.open === null) this.$emit('on-open-change', false); if (this.open === null) this.$emit('on-open-change', false);
// blur the input
const input = this.$el.querySelector('input');
if (input) input.blur();
} }
}, },
internalValue(val) { internalValue(val) {