test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 03:07:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Picker: fix blur event

Browse Source
This commit is contained in:
Leopoldthecoder 2017-12-12 15:46:19 +08:00 committed by 杨奕
parent b91c5f8d11
commit d58814290e
13 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/docs/en-US/date-picker.md
View File

@ -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 |

4
examples/docs/en-US/datetime-picker.md
View File

@ -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 |

4
examples/docs/en-US/time-picker.md
View File

@ -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 |

4
examples/docs/es/date-picker.md
View File

@ -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 |

4
examples/docs/es/datetime-picker.md
View File

@ -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 |

4
examples/docs/es/time-picker.md
View File

@ -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 |

4
examples/docs/zh-CN/date-picker.md
View File

@ -412,8 +412,8 @@
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
| blur | 当 input 失去焦点时触发 | (event: Event) |
| focus | 当 input 获得焦点时触发 | (event: Event) |
| blur | 当 input 失去焦点时触发 | 组件实例 |
| focus | 当 input 获得焦点时触发 | 组件实例 |
### Methods
| 方法名 | 说明 | 参数 |

4
examples/docs/zh-CN/datetime-picker.md
View File

@ -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
| 方法名 | 说明 | 参数 |

4
examples/docs/zh-CN/time-picker.md
View File

@ -212,8 +212,8 @@
| 事件名 | 说明 | 参数 |
|---------|--------|---------|
| change | 用户确认选定的值时触发 | 组件绑定值 |
| blur | 当 input 失去焦点时触发 | (event: Event) |
| focus | 当 input 获得焦点时触发 | (event: Event) |
| blur | 当 input 失去焦点时触发 | 组件实例 |
| focus | 当 input 获得焦点时触发 | 组件实例 |
### Methods
| 方法名 | 说明 | 参数 |

9
packages/date-picker/src/picker.vue
View File

@ -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;

8
test/unit/specs/date-picker.spec.js
View File

@ -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();
});
});
});
});

8
test/unit/specs/time-picker.spec.js
View File

@ -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();
});
});
});

8
test/unit/specs/time-select.spec.js
View File

@ -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();
});
});
});