From 0a2dd8bd53a7417bcdd849de334037836f19440f Mon Sep 17 00:00:00 2001 From: Dreamacro Date: Tue, 18 Jul 2017 13:47:35 +0800 Subject: [PATCH] Add focus method for some form component --- examples/docs/en-US/date-picker.md | 5 +++++ examples/docs/en-US/datetime-picker.md | 5 +++++ examples/docs/en-US/input-number.md | 5 +++++ examples/docs/en-US/input.md | 9 ++++----- examples/docs/en-US/select.md | 4 ++++ examples/docs/zh-CN/date-picker.md | 5 +++++ examples/docs/zh-CN/datetime-picker.md | 5 +++++ examples/docs/zh-CN/input-number.md | 5 +++++ examples/docs/zh-CN/input.md | 7 ++++++- examples/docs/zh-CN/select.md | 5 +++++ examples/docs/zh-CN/time-picker.md | 5 +++++ packages/cascader/src/main.vue | 2 +- packages/date-picker/src/picker.vue | 3 ++- packages/input-number/src/input-number.vue | 2 ++ packages/input/src/input.vue | 3 ++- packages/select/src/select.vue | 3 ++- src/mixins/focus.js | 9 +++++++++ test/unit/specs/date-picker.spec.js | 18 +++++++++++++++++ test/unit/specs/input-number.spec.js | 17 ++++++++++++++++ test/unit/specs/input.spec.js | 19 ++++++++++++++++++ test/unit/specs/select.spec.js | 17 ++++++++++++++++ test/unit/specs/time-picker.spec.js | 23 ++++++++++++++++++++++ test/unit/specs/time-select.spec.js | 19 ++++++++++++++++++ 23 files changed, 185 insertions(+), 10 deletions(-) create mode 100644 src/mixins/focus.js diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index bd26a1149..328a4bdef 100644 --- a/examples/docs/en-US/date-picker.md +++ b/examples/docs/en-US/date-picker.md @@ -309,3 +309,8 @@ Picking a date range is supported. | change | triggers when input value changes | formatted value | | blur | triggers when Input blurs | (event: Event) | | focus | triggers when Input focuses | (event: Event) | + +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | - | diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index 5b21b12a3..c5a721634 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/examples/docs/en-US/datetime-picker.md @@ -260,3 +260,8 @@ Select date and time in one picker. | change | triggers when input value changes | formatted value | | blur | triggers when Input blurs | (event: Event) | | focus | triggers when Input focuses | (event: Event) | + +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | - | diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md index 06cb7e505..196430afc 100644 --- a/examples/docs/en-US/input-number.md +++ b/examples/docs/en-US/input-number.md @@ -143,3 +143,8 @@ Additional `large` and `small` sizes of the input box are available |change | triggers when the value changes | value after change | | blur | triggers when Input blurs | (event: Event) | | focus | triggers when Input focuses | (event: Event) | + +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | - | diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index e28a7dc7e..e2186f1c5 100644 --- a/examples/docs/en-US/input.md +++ b/examples/docs/en-US/input.md @@ -653,8 +653,7 @@ Attribute | Description | Type | Options | Default |----| ----| ----| |select | triggers when a suggestion is clicked | suggestion being clicked | - - - - - +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | - | diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md index 66444b75f..4a3371f6c 100644 --- a/examples/docs/en-US/select.md +++ b/examples/docs/en-US/select.md @@ -682,3 +682,7 @@ Create and select new items that are not included in select options | label | label of option, same as `value` if omitted | string/number | — | — | | disabled | whether option is disabled | boolean | — | false | +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | - | diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md index 8cd09b5e9..00e01d929 100644 --- a/examples/docs/zh-CN/date-picker.md +++ b/examples/docs/zh-CN/date-picker.md @@ -318,3 +318,8 @@ | change | 当 input 的值改变时触发，返回值和文本框一致 | 格式化后的值 | | blur | 当 input 失去焦点时触发 | (event: Event) | | focus | 当 input 获得焦点时触发 | (event: Event) | + +### Methods +| 方法名 | 说明 | 参数 | +| ---- | ---- | ---- | +| focus | 使 input 获取焦点 | - | diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index e3d139d9b..ba5978048 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/examples/docs/zh-CN/datetime-picker.md @@ -259,3 +259,8 @@ | change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value | | blur | 当 input 失去焦点时触发 | (event: Event) | | focus | 当 input 获得焦点时触发 | (event: Event) | + +### Methods +| 方法名 | 说明 | 参数 | +| ---- | ---- | ---- | +| focus | 使 input 获取焦点 | - | diff --git a/examples/docs/zh-CN/input-number.md b/examples/docs/zh-CN/input-number.md index cd0e8a251..137f260d4 100644 --- a/examples/docs/zh-CN/input-number.md +++ b/examples/docs/zh-CN/input-number.md @@ -139,3 +139,8 @@ | change | 绑定值被改变时触发 | 最后变更的值 | | blur | 在组件 Input 失去焦点时触发 | (event: Event) | | focus | 在组件 Input 获得焦点时触发 | (event: Event) | + +### Methods +| 方法名 | 说明 | 参数 | +| ---- | ---- | ---- | +| focus | 使 input 获取焦点 | - | diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md index 42168cc62..710b48a46 100644 --- a/examples/docs/zh-CN/input.md +++ b/examples/docs/zh-CN/input.md @@ -802,7 +802,7 @@ export default { | on-icon-click | 点击图标的回调函数 | function | — | — | | icon | 输入框尾部图标 | string | — | — | -### props +### Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ----------------- | ------ | ------ | ------ | | value | 指定选项的值为选项对象的某个属性值 | string | — | value | @@ -812,3 +812,8 @@ export default { | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | select | 点击选中建议项时触发 | 选中建议项 | + +### Methods +| 方法名 | 说明 | 参数 | +| ---- | ---- | ---- | +| focus | 使 input 获取焦点 | - | diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md index d6758c003..81ca9c761 100644 --- a/examples/docs/zh-CN/select.md +++ b/examples/docs/zh-CN/select.md @@ -676,3 +676,8 @@ | value | 选项的值 | string/number/object | — | — | | label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — | | disabled | 是否禁用该选项 | boolean | — | false | + +### Methods +| 方法名 | 说明 | 参数 | +| ---- | ---- | ---- | +| focus | 使 input 获取焦点 | - | diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index 9bf5c6f59..f5ac81ad5 100644 --- a/examples/docs/zh-CN/time-picker.md +++ b/examples/docs/zh-CN/time-picker.md @@ -182,3 +182,8 @@ | change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value | | blur | 当 input 失去焦点时触发 | (event: Event) | | focus | 当 input 获得焦点时触发 | (event: Event) | + +### Methods +| 方法名 | 说明 | 参数 | +| ---- | ---- | ---- | +| focus | 使 input 获取焦点 | - | diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue index 670944df6..be575ce39 100644 --- a/packages/cascader/src/main.vue +++ b/packages/cascader/src/main.vue @@ -327,7 +327,7 @@ export default { if (this.disabled) return; if (this.filterable) { this.menuVisible = true; - this.$refs.input.$refs.input.focus(); + this.$refs.input.focus(); return; } this.menuVisible = !this.menuVisible; diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index 956f5d74d..00b1b5987 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -31,6 +31,7 @@ import Clickoutside from 'element-ui/src/utils/clickoutside'; import { formatDate, parseDate, getWeekNumber, equalDate, isDate } from './util'; import Popper from 'element-ui/src/utils/vue-popper'; import Emitter from 'element-ui/src/mixins/emitter'; +import Focus from 'element-ui/src/mixins/focus'; import ElInput from 'element-ui/packages/input'; const NewPopper = { @@ -197,7 +198,7 @@ const valueEquals = function(a, b) { }; export default { - mixins: [Emitter, NewPopper], + mixins: [Emitter, NewPopper, Focus('reference')], props: { size: String, diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue index 230c06202..9eac7e06d 100644 --- a/packages/input-number/src/input-number.vue +++ b/packages/input-number/src/input-number.vue @@ -48,9 +48,11 @@ import ElInput from 'element-ui/packages/input'; import { once, on } from 'element-ui/src/utils/dom'; import debounce from 'throttle-debounce/debounce'; + import Focus from 'element-ui/src/mixins/focus'; export default { name: 'ElInputNumber', + mixins: [Focus('input')], directives: { repeatClick: { bind(el, binding, vnode) { diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue index 88f01e806..f06a6bf7b 100644 --- a/packages/input/src/input.vue +++ b/packages/input/src/input.vue @@ -57,6 +57,7 @@