diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index a69e0476e..99b753440 100644 --- a/docs/markdown/changelog.en-US.md +++ b/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` diff --git a/packages/field/en-US.md b/packages/field/en-US.md index 3a2ba7e28..3bbdba5b9 100644 --- a/packages/field/en-US.md +++ b/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 | diff --git a/packages/field/index.vue b/packages/field/index.vue index 0337f9ae7..4b43a9093 100644 --- a/packages/field/index.vue +++ b/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; - /* istanbul ignore if */ - if (!el) { - return; - } + input.style.height = 'auto'; - el.style.height = 'auto'; - - let height = el.scrollHeight; + let height = input.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'; } } } diff --git a/packages/field/test/__snapshots__/field.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap similarity index 100% rename from packages/field/test/__snapshots__/field.spec.js.snap rename to packages/field/test/__snapshots__/index.spec.js.snap diff --git a/packages/field/test/field.spec.js b/packages/field/test/index.spec.js similarity index 89% rename from packages/field/test/field.spec.js rename to packages/field/test/index.spec.js index e9d50dd1d..70263eaba 100644 --- a/packages/field/test/field.spec.js +++ b/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); +}); diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md index 71abb34f3..925b4ab52 100644 --- a/packages/field/zh-CN.md +++ b/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