[Improvement] Field: add blur method (#1264)

docs/markdown/changelog.en-US.md

@@ -1,4 +1,4 @@
-## 更新日志
+## Changelog
 
 ### [1.1.7](https://github.com/youzan/vant/tree/v1.1.7)
 `2018-06-06`

packages/field/en-US.md

@@ -110,6 +110,7 @@ Use button slot to insert button
 ```
 
 ### API
+
 Field support all native properties of input tag，such as `maxlength`、`placeholder`、`readonly`、`autofocus`
 
 | Attribute | Description | Type | Default |
@@ -125,12 +126,21 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
 | left-icon | Left side icon name | `String` | - |
 
 ### Event
+
 Field support all native events of input tag，such as `focus`、`blur`、`keypress`
 
 | Event | Description | Parameters |
 |-----------|-----------|-----------|
 | click-icon | Triggered when click the icon of Field | - |
 
+### Methods
+
+Use ref to get field instance and call instance methods
+
+| Name | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| blur | - | - | Trigger input blur |
+
 ### Slot
 
 | name | Description |

packages/field/index.vue

@@ -17,7 +17,7 @@
       v-if="type === 'textarea'"
       v-bind="$attrs"
       v-on="listeners"
-      ref="textarea"
+      ref="input"
       :class="b('control')"
       :value="value"
     />
@@ -25,6 +25,7 @@
       v-else
       v-bind="$attrs"
       v-on="listeners"
+      ref="input"
       :class="b('control')"
       :type="type"
       :value="value"
@@ -104,6 +105,10 @@ export default create({
   },
 
   methods: {
+    blur() {
+      this.$refs.input && this.$refs.input.blur();
+    },
+
     onInput(event) {
       this.$emit('input', event.target.value);
     },
@@ -126,19 +131,14 @@ export default create({
     },
 
     adjustSize() {
-      if (!(this.type === 'textarea' && this.autosize)) {
+      const { input } = this.$refs;
+      if (!(this.type === 'textarea' && this.autosize) || !input) {
         return;
       }
 
-      const el = this.$refs.textarea;
+      input.style.height = 'auto';
-      /* istanbul ignore if */
-      if (!el) {
-        return;
-      }
 
-      el.style.height = 'auto';
+      let height = input.scrollHeight;
-
-      let height = el.scrollHeight;
       if (isObj(this.autosize)) {
         const { maxHeight, minHeight } = this.autosize;
         if (maxHeight) {
@@ -150,7 +150,7 @@ export default create({
       }
 
       if (height) {
-        el.style.height = height + 'px';
+        input.style.height = height + 'px';
       }
     }
   }

packages/field/test/index.spec.js

@@ -99,3 +99,16 @@ test('autosize object', async() => {
   await later();
   expect(textarea.element.style.height).toEqual(('50px'));
 });
+
+test('blur method', () => {
+  const fn = jest.fn();
+  const wrapper = mount(Field, {
+    listeners: {
+      blur: fn
+    }
+  });
+  wrapper.find('input').element.focus();
+  wrapper.vm.blur();
+
+  expect(fn.mock.calls.length).toEqual(1);
+});

packages/field/zh-CN.md

@@ -112,6 +112,7 @@ Vue.use(Field);
 ```
 
 ### API
+
 Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`readonly`、`autofocus` 等
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -127,11 +128,20 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | left-icon | 输入框左侧图标 (可选值见 Icon 组件)  | `String` | - |
 
 ### Event
+
 Field 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
 
 | 事件 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
-| click-icon | 点击尾部图标时触发 | - |
+| click-icon | 点击尾部图标时触发 | -
+
+### 方法
+
+通过 ref 可以获取到 field 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| blur | - | - | 取消输入框焦点 |
 
 ### Slot