Add focus method for some form component

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

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

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

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

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

examples/docs/zh-CN/date-picker.md

@@ -318,3 +318,8 @@
 | change | 当 input 的值改变时触发，返回值和文本框一致 | 格式化后的值 |
 | blur | 当 input 失去焦点时触发 | (event: Event) |
 | focus | 当 input 获得焦点时触发 | (event: Event) |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |

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 获取焦点 | - |

examples/docs/zh-CN/input-number.md

@@ -139,3 +139,8 @@
 | change | 绑定值被改变时触发 | 最后变更的值 |
 | blur | 在组件 Input 失去焦点时触发 | (event: Event) |
 | focus | 在组件 Input 获得焦点时触发 | (event: Event) |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |

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 获取焦点 | - |

examples/docs/zh-CN/select.md

@@ -676,3 +676,8 @@
 | value | 选项的值 | string/number/object | — | — |
 | label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — |
 | disabled | 是否禁用该选项 | boolean | — | false |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |

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 获取焦点 | - |

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;

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,

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

packages/input/src/input.vue

@@ -57,6 +57,7 @@
 </template>
 <script>
   import emitter from 'element-ui/src/mixins/emitter';
+  import Focus from 'element-ui/src/mixins/focus';
   import calcTextareaHeight from './calcTextareaHeight';
   import merge from 'element-ui/src/utils/merge';
 
@@ -65,7 +66,7 @@
 
     componentName: 'ElInput',
 
-    mixins: [emitter],
+    mixins: [emitter, Focus('input')],
 
     data() {
       return {

packages/select/src/select.vue

@@ -93,6 +93,7 @@
 
 <script type="text/babel">
   import Emitter from 'element-ui/src/mixins/emitter';
+  import Focus from 'element-ui/src/mixins/focus';
   import Locale from 'element-ui/src/mixins/locale';
   import ElInput from 'element-ui/packages/input';
   import ElSelectMenu from './select-dropdown.vue';
@@ -111,7 +112,7 @@
   };
 
   export default {
-    mixins: [Emitter, Locale],
+    mixins: [Emitter, Locale, Focus('reference')],
 
     name: 'ElSelect',
 

src/mixins/focus.js

+export default function(ref) {
+  return {
+    methods: {
+      focus() {
+        this.$refs[ref].focus();
+      }
+    }
+  };
+};

test/unit/specs/date-picker.spec.js

@@ -158,6 +158,24 @@ describe('DatePicker', () => {
     }, DELAY);
   });
 
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker ref="picker"></el-date-picker>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spy);
+    vm.$refs.picker.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
+
   it('change event', done => {
     let inputValue;
 

test/unit/specs/input-number.spec.js

@@ -311,4 +311,21 @@ describe('InputNumber', () => {
       done();
     });
   });
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-input-number ref="input"></el-input-number>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.input.$on('focus', spy);
+    vm.$refs.input.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
 });

test/unit/specs/input.spec.js

@@ -167,6 +167,25 @@ describe('Input', () => {
     }, 200);
   });
 
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-input ref="input">
+        </el-input>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.input.$on('focus', spy);
+    vm.$refs.input.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
+
   describe('Input Events', () => {
     it('event:focus & blur', done => {
       vm = createVue({

test/unit/specs/select.spec.js

@@ -629,4 +629,21 @@ describe('Select', () => {
       done();
     });
   });
+
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-select ref="select"></el-select>
+      `
+    }, true);
+    const spy = sinon.spy();
+
+    vm.$refs.select.$on('focus', spy);
+    vm.$refs.select.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
 });

test/unit/specs/time-picker.spec.js

@@ -202,6 +202,29 @@ describe('TimePicker', () => {
       done();
     });
   });
+
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker
+          type="date"
+          placeholder="选择日期"
+          ref="picker">
+        </el-date-picker>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spy);
+    vm.$refs.picker.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
+
 });
 
 describe('TimePicker(range)', () => {

test/unit/specs/time-select.spec.js

@@ -227,4 +227,23 @@ describe('TimeSelect', () => {
       done();
     });
   });
+
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-time-select ref="picker"></el-time-select>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spy);
+    vm.$refs.picker.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      destroyVM(vm);
+      done();
+    });
+  });
 });