From 0a99da352eada7e0aa9c0e718473b60bfc49d635 Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 20 Jun 2018 20:09:04 +0800 Subject: [PATCH] [Improvement] Field: support clearable (#1309) --- packages/address-edit/Detail.vue | 22 ++--- .../test/__snapshots__/demo.spec.js.snap | 49 ++++++---- .../test/__snapshots__/index.spec.js.snap | 89 +++++++++++-------- packages/address-edit/test/index.spec.js | 33 ------- .../test/__snapshots__/demo.spec.js.snap | 18 ++-- packages/coupon-list/index.vue | 3 +- .../test/__snapshots__/demo.spec.js.snap | 9 +- .../test/__snapshots__/demo.spec.js.snap | 18 ++-- packages/field/demo/index.vue | 12 ++- packages/field/en-US.md | 15 ++-- packages/field/index.vue | 88 +++++++++++------- .../test/__snapshots__/demo.spec.js.snap | 82 +++++++++++------ .../test/__snapshots__/index.spec.js.snap | 9 +- packages/field/test/index.spec.js | 10 +-- packages/field/zh-CN.md | 15 ++-- packages/search/index.vue | 5 +- .../test/__snapshots__/demo.spec.js.snap | 27 ++++-- packages/vant-css/src/address-edit.css | 1 + packages/vant-css/src/field.css | 38 ++++---- 19 files changed, 312 insertions(+), 231 deletions(-) diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue index 913be6707..06693456c 100644 --- a/packages/address-edit/Detail.vue +++ b/packages/address-edit/Detail.vue @@ -5,18 +5,22 @@ ref="field" rows="1" autosize + :clearable="!isAndroid" type="textarea" maxlength="200" :value="value" :error="error" :label="$t('label')" :placeholder="$t('placeholder')" - @click-icon="onClickIcon" > -
- {{ $t('complete') }} - -
+ + {{ $t('complete') }} +
- - - +
+ + + + +
@@ -24,9 +27,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
@@ -37,26 +43,28 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
-
+
详细地址
- - -
-
- -
+
+ + + +
@@ -69,9 +77,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap index e81025318..a30a160e4 100644 --- a/packages/address-edit/test/__snapshots__/index.spec.js.snap +++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap @@ -9,9 +9,12 @@ exports[`create a AddressEdit 1`] = `
- - - +
+ + + + +
@@ -22,9 +25,12 @@ exports[`create a AddressEdit 1`] = `
- - - +
+ + + + +
@@ -35,26 +41,28 @@ exports[`create a AddressEdit 1`] = `
- - - +
+ + + + +
-
+
详细地址
- - -
-
- -
+
+ + + +
@@ -98,9 +106,12 @@ exports[`create a AddressEdit with props 1`] = `
- - - +
+ + + + +
@@ -111,9 +122,12 @@ exports[`create a AddressEdit with props 1`] = `
- - - +
+ + + + +
@@ -124,26 +138,28 @@ exports[`create a AddressEdit with props 1`] = `
- - - +
+ + + + +
-
+
详细地址
- - -
-
- -
+
+ + + +
@@ -156,9 +172,12 @@ exports[`create a AddressEdit with props 1`] = `
- - - +
+ + + + +
diff --git a/packages/address-edit/test/index.spec.js b/packages/address-edit/test/index.spec.js index 8c0826801..4a19cae44 100644 --- a/packages/address-edit/test/index.spec.js +++ b/packages/address-edit/test/index.spec.js @@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'; import { renderToString } from '@vue/server-test-utils'; import AddressEdit from '../'; -import AddressDetail from '../Detail'; import areaList from '../../area/demo/area.simple'; import { later, transitionStub } from '../../../test/utils'; @@ -151,38 +150,6 @@ test('on change detail', () => { expect(wrapper.emitted('change-detail')[0][0]).toEqual('123'); }); -test('clear address detail in ios', () => { - const wrapper = mount(AddressEdit, { - propsData: { - addressInfo: { - address_detail: '123' - } - } - }); - - wrapper.vm.isAndroid = false; - wrapper.findAll('.van-field__control').at(2).trigger('focus'); - wrapper.find('.van-field__icon').trigger('touchstart'); - expect(wrapper.vm.data.address_detail).toEqual(''); -}); - -test('finish edit address detail in android', () => { - const wrapper = mount(AddressDetail, { - propsData: { - value: '123' - } - }); - - wrapper.vm.$on('input', val => { - wrapper.vm.value = val; - }); - - wrapper.setData({ isAndroid: true }); - wrapper.find('.van-field__control').trigger('focus'); - wrapper.find('.van-field__icon').trigger('touchstart'); - expect(wrapper.vm.value).toEqual('123'); -}); - test('watch address info', () => { const wrapper = mount(AddressEdit); wrapper.setProps({ addressInfo: { name: '123' }}); diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap index 5c799cf55..65cbd3a92 100644 --- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap +++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap @@ -53,9 +53,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
@@ -66,9 +69,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
diff --git a/packages/coupon-list/index.vue b/packages/coupon-list/index.vue index 0d0be5bbc..9947df8a6 100644 --- a/packages/coupon-list/index.vue +++ b/packages/coupon-list/index.vue @@ -2,9 +2,10 @@
diff --git a/packages/coupon-list/test/__snapshots__/demo.spec.js.snap b/packages/coupon-list/test/__snapshots__/demo.spec.js.snap index f970a8330..9d381068f 100644 --- a/packages/coupon-list/test/__snapshots__/demo.spec.js.snap +++ b/packages/coupon-list/test/__snapshots__/demo.spec.js.snap @@ -22,9 +22,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
diff --git a/packages/dialog/test/__snapshots__/demo.spec.js.snap b/packages/dialog/test/__snapshots__/demo.spec.js.snap index dba5ccf14..ab792ff99 100644 --- a/packages/dialog/test/__snapshots__/demo.spec.js.snap +++ b/packages/dialog/test/__snapshots__/demo.spec.js.snap @@ -24,9 +24,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
@@ -37,9 +40,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
diff --git a/packages/field/demo/index.vue b/packages/field/demo/index.vue index 495d09d7f..c18cd0ee4 100644 --- a/packages/field/demo/index.vue +++ b/packages/field/demo/index.vue @@ -11,10 +11,11 @@ {{ $t('sendSMS') }} @@ -139,5 +139,9 @@ export default { diff --git a/packages/field/en-US.md b/packages/field/en-US.md index 3bbdba5b9..59d89a6f7 100644 --- a/packages/field/en-US.md +++ b/packages/field/en-US.md @@ -25,11 +25,12 @@ Use `type` prop to custom diffrent type fields. Send SMS @@ -119,6 +119,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh | label | Field label | `String` | - | | type | Input type | `String` | `text` | | disabled | Disable field | `Boolean` | `false` | +| clearable | Whether to be clearable | `Boolean` | `false` | | error | Whether to show error info | `Boolean` | `false` | | error-message | Error message | `String` | `''` | | autosize | Textarea auto resize，can accpet an object, e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` | diff --git a/packages/field/index.vue b/packages/field/index.vue index 4b43a9093..bb751f64c 100644 --- a/packages/field/index.vue +++ b/packages/field/index.vue @@ -8,45 +8,48 @@ :class="b({ error, disabled: $attrs.disabled, - 'has-icon': showIcon, 'min-height': type === 'textarea' && !autosize })" > - - - +
+ + + + +
@@ -121,15 +146,18 @@ exports[`renders demo correctly 1`] = `
- - +
+ + + +
+ +
+
-
- -
diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap index df614a355..6e64ba46d 100644 --- a/packages/field/test/__snapshots__/index.spec.js.snap +++ b/packages/field/test/__snapshots__/index.spec.js.snap @@ -5,9 +5,12 @@ exports[`render textarea 1`] = `
- - - +
+ + + + +
diff --git a/packages/field/test/index.spec.js b/packages/field/test/index.spec.js index 70263eaba..9919743be 100644 --- a/packages/field/test/index.spec.js +++ b/packages/field/test/index.spec.js @@ -21,7 +21,7 @@ test('click icon event', () => { } }); - wrapper.find('.van-field__icon').trigger('touchstart'); + wrapper.find('.van-field__icon').trigger('click'); expect(wrapper.emitted('click-icon')).toBeTruthy(); expect(onIconClick.mock.calls.length).toBe(1); }); @@ -102,11 +102,9 @@ test('autosize object', async() => { test('blur method', () => { const fn = jest.fn(); - const wrapper = mount(Field, { - listeners: { - blur: fn - } - }); + const wrapper = mount(Field); + + wrapper.vm.$on('blur', fn); wrapper.find('input').element.focus(); wrapper.vm.blur(); diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md index 925b4ab52..2a977b791 100644 --- a/packages/field/zh-CN.md +++ b/packages/field/zh-CN.md @@ -27,11 +27,12 @@ Vue.use(Field); 发送验证码 @@ -121,6 +121,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla | value | 当前输入的值 | `String | Number` | - | | type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` | | disabled | 是否禁用输入框 | `Boolean` | `false` | +| clearable | 输入框内容是否可清除 | `Boolean` | `false` | | error | 是否将输入内容标红 | `Boolean` | `false` | | error-message | 底部错误提示文案 | `String` | `''` | | autosize | 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | diff --git a/packages/search/index.vue b/packages/search/index.vue index 18feff2db..8265a480a 100644 --- a/packages/search/index.vue +++ b/packages/search/index.vue @@ -4,11 +4,10 @@
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap index 965e7043a..c492205cc 100644 --- a/packages/search/test/__snapshots__/demo.spec.js.snap +++ b/packages/search/test/__snapshots__/demo.spec.js.snap @@ -11,9 +11,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
@@ -31,9 +34,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
@@ -53,9 +59,12 @@ exports[`renders demo correctly 1`] = `
- - - +
+ + + + +
diff --git a/packages/vant-css/src/address-edit.css b/packages/vant-css/src/address-edit.css index 0e31b5525..7759a746a 100644 --- a/packages/vant-css/src/address-edit.css +++ b/packages/vant-css/src/address-edit.css @@ -30,5 +30,6 @@ &-detail__finish { color: $blue; font-size: 12px; + display: block; } } diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css index 796cae320..fa981d853 100644 --- a/packages/vant-css/src/field.css +++ b/packages/vant-css/src/field.css @@ -9,6 +9,11 @@ position: relative; } + &__body { + display: flex; + align-items: center; + } + &__control { border: 0; margin: 0; @@ -25,17 +30,24 @@ } } - &__icon { - position: absolute; - right: 0; - top: 50%; - color: $gray-dark; - padding: 10px 0 10px 10px; - transform: translate3d(0, -50%, 0); + &__clear, + &__icon, + &__button { + flex-shrink: 0; + } - .van-icon { - display: block; - } + &__clear, + &__icon { + padding: 0 10px; + color: $gray-dark; + line-height: inherit; + margin-right: -10px; + } + + &__icon .van-icon { + display: block; + font-size: 16px; + line-height: inherit; } &__button { @@ -68,10 +80,4 @@ min-height: 60px; } } - - &--has-icon { - .van-field__control { - padding-right: 20px; - } - } }