From 79a2b13b63d68f042c11fc0da7f616b871ea6c7b Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 19 Dec 2017 10:24:56 +0800 Subject: [PATCH] [new feature] Search: support input native events (#451) --- docs/demos/views/search.vue | 4 ++-- docs/markdown/en-US/field.md | 4 +--- docs/markdown/en-US/search.md | 1 + docs/markdown/zh-CN/field.md | 4 +--- docs/markdown/zh-CN/search.md | 1 + packages/search/index.vue | 35 +++++++++++++++++++++++----------- test/unit/specs/search.spec.js | 34 ++++++++++++++++++++++----------- 7 files changed, 53 insertions(+), 30 deletions(-) diff --git a/docs/demos/views/search.vue b/docs/demos/views/search.vue index deb9c4aa2..942816da6 100644 --- a/docs/demos/views/search.vue +++ b/docs/demos/views/search.vue @@ -11,8 +11,8 @@ :placeholder="$t('placeholder')" :showAction="true" @search="onSearch" - @cancel="onCancel"> - + @cancel="onCancel" + /> diff --git a/docs/markdown/en-US/field.md b/docs/markdown/en-US/field.md index 629b8896d..63e1c44e6 100644 --- a/docs/markdown/en-US/field.md +++ b/docs/markdown/en-US/field.md @@ -90,12 +90,10 @@ Filed support all native properties of input tag，such as `maxlength`、`placeh | icon | Right side Icon name | `String` | - | - | ### Event -Filed support all native events of input tag，such as `keypress`、`keyup` +Filed support all native events of input tag，such as `focus`、`blur`、`keypress` | Event | Description | Parameters | |-----------|-----------|-----------| -| focus | Triggered when filed get focused | - | -| blur | Triggered when blur filed | - | | click-icon | Triggered when click the icon of filed | - | ### Slot diff --git a/docs/markdown/en-US/search.md b/docs/markdown/en-US/search.md index 36bcd56b4..aa9cb62ec 100644 --- a/docs/markdown/en-US/search.md +++ b/docs/markdown/en-US/search.md @@ -64,6 +64,7 @@ Search support all native properties of input tag，such as `maxlength`、`place | showAction | Whether to show right button | `Boolean` | false | - | ### Event +Search support all native events of input tag，such as `focus`、`blur`、`keypress` | Event | Description | Attribute | |-----------|-----------|-----------| diff --git a/docs/markdown/zh-CN/field.md b/docs/markdown/zh-CN/field.md index 29f10879b..4d2319127 100644 --- a/docs/markdown/zh-CN/field.md +++ b/docs/markdown/zh-CN/field.md @@ -92,12 +92,10 @@ Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla | icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 | ### Event -Filed 默认支持 Input 标签所有的原生事件，比如 `keypress`、`keyup` 等 +Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等 | 事件名称 | 说明 | 回调参数 | |-----------|-----------|-----------| -| focus | 输入框聚焦时触发 | - | -| blur | 输入框失焦时触发 | - | | click-icon | 点击尾部图标时触发 | - | ### Slot diff --git a/docs/markdown/zh-CN/search.md b/docs/markdown/zh-CN/search.md index ec9345b34..69e18d93f 100644 --- a/docs/markdown/zh-CN/search.md +++ b/docs/markdown/zh-CN/search.md @@ -54,6 +54,7 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl | showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - | ### Event +Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等 | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| diff --git a/packages/search/index.vue b/packages/search/index.vue index 5b4a8b380..0d0f4895e 100644 --- a/packages/search/index.vue +++ b/packages/search/index.vue @@ -6,14 +6,12 @@
@@ -59,15 +57,36 @@ export default create({ } }, + computed: { + listeners() { + return { + ...this.$listeners, + focus: this.onFocus, + input: this.onInput, + keypress: this.onKeypress + }; + } + }, + methods: { onFocus() { this.isFocus = true; + this.$emit('focus'); }, onInput(event) { this.$emit('input', event.target.value); }, + onKeypress(event) { + // press enter + if (event.keyCode === 13) { + event.preventDefault(); + this.$emit('search', this.value); + } + this.$emit('keypress', event); + }, + // refocus after click close icon onClean() { this.$emit('input', ''); @@ -84,12 +103,6 @@ export default create({ this.$emit('cancel'); }, - onSearch(e) { - e.preventDefault(); - this.$emit('search', this.value); - return false; - }, - onClickoutside() { this.isFocus = false; this.focusStatus = false; diff --git a/test/unit/specs/search.spec.js b/test/unit/specs/search.spec.js index b066b6bc7..2484e6bbb 100644 --- a/test/unit/specs/search.spec.js +++ b/test/unit/specs/search.spec.js @@ -52,8 +52,18 @@ describe('Search', () => { it('handle clean click and refocus', (done) => { wrapper = mount(Search); - wrapper.setProps({ value: 'test' }); - const eventStub = sinon.stub(wrapper.vm, '$emit'); + + let value = 'test'; + wrapper.setProps({ value }); + + const focusSpy = sinon.spy(); + wrapper.vm.$on('focus', focusSpy); + + const inputSpy = sinon.spy(); + wrapper.vm.$on('input', val => { + value = val; + inputSpy(); + }); const input = wrapper.find('.van-search__input')[0]; input.trigger('focus'); @@ -62,8 +72,9 @@ describe('Search', () => { cleanBtn.trigger('click'); wrapper.vm.$nextTick(() => { - expect(eventStub.calledOnce).to.be.true; - expect(eventStub.calledWith('input')).to.be.true; + expect(focusSpy.calledOnce).to.be.true; + expect(inputSpy.calledOnce).to.be.true; + expect(value).to.equal(''); done(); }); }); @@ -89,19 +100,20 @@ describe('Search', () => { }); }); - it('emit a search event', (done) => { + it('emit a search event', () => { wrapper = mount(Search); - const eventStub = sinon.stub(wrapper.vm, '$emit'); + const searchSpy = sinon.spy(); + wrapper.vm.$on('search', searchSpy); const input = wrapper.find('.van-search__input')[0]; input.trigger('keypress.enter'); + expect(searchSpy.calledOnce).to.be.true; - wrapper.vm.$nextTick(() => { - expect(eventStub.calledOnce).to.be.true; - expect(eventStub.calledWith('search')); - done(); - }); + const keypressSpy = sinon.spy(); + wrapper.vm.$on('keypress', keypressSpy); + input.trigger('keypress.a'); + expect(keypressSpy.calledOnce).to.be.true; }); it('blur after click outside', () => {