From d58814290e972fb8049092a06d5ce78783f0ac33 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Tue, 12 Dec 2017 15:46:19 +0800 Subject: [PATCH] Picker: fix blur event --- examples/docs/en-US/date-picker.md | 4 ++-- examples/docs/en-US/datetime-picker.md | 4 ++-- examples/docs/en-US/time-picker.md | 4 ++-- examples/docs/es/date-picker.md | 4 ++-- examples/docs/es/datetime-picker.md | 4 ++-- examples/docs/es/time-picker.md | 4 ++-- examples/docs/zh-CN/date-picker.md | 4 ++-- examples/docs/zh-CN/datetime-picker.md | 4 ++-- examples/docs/zh-CN/time-picker.md | 4 ++-- packages/date-picker/src/picker.vue | 9 +-------- test/unit/specs/date-picker.spec.js | 8 +++++--- test/unit/specs/time-picker.spec.js | 8 +++++--- test/unit/specs/time-select.spec.js | 8 +++++--- 13 files changed, 34 insertions(+), 35 deletions(-) diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index f6c91cc38..6ed677351 100644 --- a/examples/docs/en-US/date-picker.md +++ b/examples/docs/en-US/date-picker.md @@ -417,8 +417,8 @@ This feature is at alpha stage. Feedback welcome. | Event Name | Description | Parameters | |---------|--------|---------| | change | triggers when user confirms the value | component's binding value | -| blur | triggers when Input blurs | (event: Event) | -| focus | triggers when Input focuses | (event: Event) | +| blur | triggers when Input blurs | component instance | +| focus | triggers when Input focuses | component instance | ### Methods | Method | Description | Parameters | diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index 6eef2f4af..30f4df2e9 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/examples/docs/en-US/datetime-picker.md @@ -274,8 +274,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex | Event Name | Description | Parameters | |---------|--------|---------| | change | triggers when user confirms the value | component's binding value | -| blur | triggers when Input blurs | (event: Event) | -| focus | triggers when Input focuses | (event: Event) | +| blur | triggers when Input blurs | component instance | +| focus | triggers when Input focuses | component instance | ### Methods | Method | Description | Parameters | diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md index 87c5c9fe2..a6101ee8f 100644 --- a/examples/docs/en-US/time-picker.md +++ b/examples/docs/en-US/time-picker.md @@ -212,5 +212,5 @@ Can pick an arbitrary time range. | Event Name | Description | Parameters | |---------|--------|---------| | change | triggers when user confirms the value | component's bounded value | -| blur | triggers when Input blurs | (event: Event) | -| focus | triggers when Input focuses | (event: Event) | +| blur | triggers when Input blurs | component instance | +| focus | triggers when Input focuses | component instance | diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md index 0f90c7031..2ac51aea4 100644 --- a/examples/docs/es/date-picker.md +++ b/examples/docs/es/date-picker.md @@ -418,8 +418,8 @@ Esta característica está en la etapa alfa. Feedback bienvenido. | Nombre | Descripción | Parametros | | ------ | ---------------------------------------- | ---------------------------- | | change | se dispara cuando el usuario confirma el valor | valor enlazado al componente | -| blur | se dispara cuando el input pierde el foco | (event: Event) | -| focus | se dispara cuando el input obtiene el foco | (event: Event) | +| blur | se dispara cuando el input pierde el foco | instancia del componente | +| focus | se dispara cuando el input obtiene el foco | instancia del componente | ### Metodos | Metodo | Descripción | Parameteros | diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md index 7a47631e1..cdb849250 100644 --- a/examples/docs/es/datetime-picker.md +++ b/examples/docs/es/datetime-picker.md @@ -275,8 +275,8 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d | Nombre de evento | Descripción | Parámetros | | ---------------- | ---------------------------------------- | ----------------------------- | | change | Se dispara cuando el usuario confirma el valor | valor enlazado del componente | -| blur | Se dispara cuando el input pierde el foco | (event: Event) | -| focus | Se dispara cuando el input obtiene el foco | (event: Event) | +| blur | Se dispara cuando el input pierde el foco | instancia del componente | +| focus | Se dispara cuando el input obtiene el foco | instancia del componente | ### Métodos | Método | Descripción | Parámetros | diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md index b9470954a..cf072dbd6 100644 --- a/examples/docs/es/time-picker.md +++ b/examples/docs/es/time-picker.md @@ -212,5 +212,5 @@ Es posible escoger un rango de tiempo arbitrario. | Nombre de Evento | Descripción | Parámetros | | ---------------- | ---------------------------------------- | ----------------------------- | | change | se lanza cuando el usuario confirma el valor | valor limitado del componente | -| blur | se lanza cuando el input se difumina | (event: Event) | -| focus | se lanza cuando el input se enfoca | (event: Event) | +| blur | se lanza cuando el input se difumina | instancia del componente | +| focus | se lanza cuando el input se enfoca | instancia del componente | diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md index c47f7fd9b..c7dbda5ad 100644 --- a/examples/docs/zh-CN/date-picker.md +++ b/examples/docs/zh-CN/date-picker.md @@ -412,8 +412,8 @@ | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 | -| blur | 当 input 失去焦点时触发 | (event: Event) | -| focus | 当 input 获得焦点时触发 | (event: Event) | +| blur | 当 input 失去焦点时触发 | 组件实例 | +| focus | 当 input 获得焦点时触发 | 组件实例 | ### Methods | 方法名 | 说明 | 参数 | diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index c08b33940..cb0298d72 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/examples/docs/zh-CN/datetime-picker.md @@ -273,8 +273,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其 | Event Name | Description | Parameters | |---------|--------|---------| | change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 | -| blur | 当 input 失去焦点时触发 | (event: Event) | -| focus | 当 input 获得焦点时触发 | (event: Event) | +| blur | 当 input 失去焦点时触发 | 组件实例 | +| focus | 当 input 获得焦点时触发 | 组件实例 | ### Methods | 方法名 | 说明 | 参数 | diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index ac3e6e21e..324c92fd6 100644 --- a/examples/docs/zh-CN/time-picker.md +++ b/examples/docs/zh-CN/time-picker.md @@ -212,8 +212,8 @@ | 事件名 | 说明 | 参数 | |---------|--------|---------| | change | 用户确认选定的值时触发 | 组件绑定值 | -| blur | 当 input 失去焦点时触发 | (event: Event) | -| focus | 当 input 获得焦点时触发 | (event: Event) | +| blur | 当 input 失去焦点时触发 | 组件实例 | +| focus | 当 input 获得焦点时触发 | 组件实例 | ### Methods | 方法名 | 说明 | 参数 | diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index 70717ab12..58b7e5f4f 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -11,7 +11,6 @@ v-clickoutside="handleClose" :placeholder="placeholder" @focus="handleFocus" - @blur="handleBlur" @keydown.native="handleKeydown" :value="displayValue" @input="value => userInput = value" @@ -371,6 +370,7 @@ export default { this.userInput = null; } this.dispatch('ElFormItem', 'el.form.blur'); + this.$emit('blur', this); this.blur(); } }, @@ -599,9 +599,6 @@ export default { handleClose() { this.pickerVisible = false; - if (this.ranged) { - this.$emit('blur', this); - } }, handleFocus() { @@ -613,10 +610,6 @@ export default { this.$emit('focus', this); }, - handleBlur() { - this.$emit('blur', this); - }, - handleKeydown(event) { const keyCode = event.keyCode; diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js index f95bded9b..f299b7d37 100644 --- a/test/unit/specs/date-picker.spec.js +++ b/test/unit/specs/date-picker.spec.js @@ -359,12 +359,14 @@ describe('DatePicker', () => { vm.$refs.picker.$on('focus', spyFocus); vm.$refs.picker.$on('blur', spyBlur); vm.$el.querySelector('input').focus(); - vm.$el.querySelector('input').blur(); vm.$nextTick(_ => { expect(spyFocus.calledOnce).to.be.true; - expect(spyBlur.calledOnce).to.be.true; - done(); + vm.$refs.picker.pickerVisible = false; + vm.$nextTick(_ => { + expect(spyBlur.calledOnce).to.be.true; + done(); + }); }); }); }); diff --git a/test/unit/specs/time-picker.spec.js b/test/unit/specs/time-picker.spec.js index e635928d7..f4a4b5687 100644 --- a/test/unit/specs/time-picker.spec.js +++ b/test/unit/specs/time-picker.spec.js @@ -240,12 +240,14 @@ describe('TimePicker', () => { vm.$refs.picker.$on('focus', spyFocus); vm.$refs.picker.$on('blur', spyBlur); vm.$el.querySelector('input').focus(); - vm.$el.querySelector('input').blur(); vm.$nextTick(_ => { expect(spyFocus.calledOnce).to.be.true; - expect(spyBlur.calledOnce).to.be.true; - done(); + vm.$refs.picker.pickerVisible = false; + vm.$nextTick(_ => { + expect(spyBlur.calledOnce).to.be.true; + done(); + }); }); }); diff --git a/test/unit/specs/time-select.spec.js b/test/unit/specs/time-select.spec.js index 0eaaf5e16..d784dc5b6 100644 --- a/test/unit/specs/time-select.spec.js +++ b/test/unit/specs/time-select.spec.js @@ -212,12 +212,14 @@ describe('TimeSelect', () => { vm.$refs.picker.$on('focus', spyFocus); vm.$refs.picker.$on('blur', spyBlur); vm.$el.querySelector('input').focus(); - vm.$el.querySelector('input').blur(); vm.$nextTick(_ => { expect(spyFocus.calledOnce).to.be.true; - expect(spyBlur.calledOnce).to.be.true; - done(); + vm.$refs.picker.pickerVisible = false; + vm.$nextTick(_ => { + expect(spyBlur.calledOnce).to.be.true; + done(); + }); }); });