blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Field: support clearable (#1309)

Browse Source
This commit is contained in:
neverland 2018-06-20 20:09:04 +08:00 committed by GitHub
parent c368e36aea
commit 0a99da352e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 312 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/address-edit/Detail.vue
View File

@ -5,18 +5,22 @@
ref="field" ref="field"
rows="1" rows="1"
autosize autosize
:clearable="!isAndroid"
type="textarea" type="textarea"
maxlength="200" maxlength="200"
:value="value" :value="value"
:error="error" :error="error"
:label="$t('label')" :label="$t('label')"
:placeholder="$t('placeholder')" :placeholder="$t('placeholder')"
@click-icon="onClickIcon"
> >
<div slot="icon"> <span
<span v-if="showIcon && isAndroid" :class="b('finish')">{{ $t('complete') }}</span> v-if="showIcon && isAndroid"
<icon v-else-if="showIcon" name="clear" /> slot="icon"
</div> :class="b('finish')"
@click="$refs.field.blur()"
>
{{ $t('complete') }}
</span>
</field> </field>
<cell <cell
v-if="showSearchList" v-if="showSearchList"
@ -66,14 +70,6 @@ export default create({
}, },
methods: { methods: {
onClickIcon() {
if (this.isAndroid) {
this.$refs.field.blur();
} else {
this.$emit('input', '');
}
},
onSelect(express) { onSelect(express) {
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim()); this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
this.$emit('select-search', express); this.$emit('select-search', express);

49
packages/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -11,9 +11,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -24,9 +27,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="tel" placeholder="手机或固定电话" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="tel" placeholder="手机或固定电话" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -37,26 +43,28 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
</div> </div>
<div> <div>
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon"> <div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field">
<!----> <!---->
<div class="van-cell__title"><span>详细地址</span> <div class="van-cell__title"><span>详细地址</span>
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea> <div class="van-field__body">
<!----> <textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
<div class="van-field__icon"> <!---->
<div> <!---->
<!----> <!---->
</div>
</div> </div>
<!----> <!---->
</div> </div>
@ -69,9 +77,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->

89
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -9,9 +9,12 @@ exports[`create a AddressEdit 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -22,9 +25,12 @@ exports[`create a AddressEdit 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="tel" placeholder="手机或固定电话" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="tel" placeholder="手机或固定电话" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -35,26 +41,28 @@ exports[`create a AddressEdit 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
</div> </div>
<div> <div>
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon"> <div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field">
<!----> <!---->
<div class="van-cell__title"><span>详细地址</span> <div class="van-cell__title"><span>详细地址</span>
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea> <div class="van-field__body">
<!----> <textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
<div class="van-field__icon"> <!---->
<div> <!---->
<!----> <!---->
</div>
</div> </div>
<!----> <!---->
</div> </div>
@ -98,9 +106,12 @@ exports[`create a AddressEdit with props 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" maxlength="15" placeholder="名字" value="测试" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" maxlength="15" placeholder="名字" value="测试" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -111,9 +122,12 @@ exports[`create a AddressEdit with props 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="tel" placeholder="手机或固定电话" value="13000000000" class="van-field__control"> <div class="van-field__body">
<!----> <input type="tel" placeholder="手机或固定电话" value="13000000000" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -124,26 +138,28 @@ exports[`create a AddressEdit with props 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" readonly="readonly" placeholder="收件地区" value="北京市 北京市 朝阳区" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" readonly="readonly" placeholder="收件地区" value="北京市 北京市 朝阳区" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
</div> </div>
<div> <div>
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon"> <div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field">
<!----> <!---->
<div class="van-cell__title"><span>详细地址</span> <div class="van-cell__title"><span>详细地址</span>
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control">详细地址</textarea> <div class="van-field__body">
<!----> <textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control">详细地址</textarea>
<div class="van-field__icon"> <!---->
<div> <!---->
<!----> <!---->
</div>
</div> </div>
<!----> <!---->
</div> </div>
@ -156,9 +172,12 @@ exports[`create a AddressEdit with props 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control"> <div class="van-field__body">
<!----> <input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->

33
packages/address-edit/test/index.spec.js
View File

@ -2,7 +2,6 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { renderToString } from '@vue/server-test-utils'; import { renderToString } from '@vue/server-test-utils';
import AddressEdit from '../'; import AddressEdit from '../';
import AddressDetail from '../Detail';
import areaList from '../../area/demo/area.simple'; import areaList from '../../area/demo/area.simple';
import { later, transitionStub } from '../../../test/utils'; import { later, transitionStub } from '../../../test/utils';
@ -151,38 +150,6 @@ test('on change detail', () => {
expect(wrapper.emitted('change-detail')[0][0]).toEqual('123'); 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', () => { test('watch address info', () => {
const wrapper = mount(AddressEdit); const wrapper = mount(AddressEdit);
wrapper.setProps({ addressInfo: { name: '123' }}); wrapper.setProps({ addressInfo: { name: '123' }});

18
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -53,9 +53,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" maxlength="30" placeholder="张三" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" maxlength="30" placeholder="张三" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -66,9 +69,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="tel" placeholder="手机或固定电话" class="van-field__control"> <div class="van-field__body">
<!----> <input type="tel" placeholder="手机或固定电话" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->

3
packages/coupon-list/index.vue
View File

@ -2,9 +2,10 @@
<div :class="b()"> <div :class="b()">
<cell-group v-if="showExchangeBar" :class="b('top')"> <cell-group v-if="showExchangeBar" :class="b('top')">
<field <field
v-model="currentCode"
clearable
:class="b('field')" :class="b('field')"
class="van-hairline--surround" class="van-hairline--surround"
v-model="currentCode"
:placeholder="inputPlaceholder || $t('placeholder')" :placeholder="inputPlaceholder || $t('placeholder')"
:maxlength="20" :maxlength="20"
/> />

9
packages/coupon-list/test/__snapshots__/demo.spec.js.snap
View File

@ -22,9 +22,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<input type="text" placeholder="请输入优惠码" maxlength="20" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" placeholder="请输入优惠码" maxlength="20" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->

18
packages/dialog/test/__snapshots__/demo.spec.js.snap
View File

@ -24,9 +24,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" placeholder="请输入用户名" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -37,9 +40,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="password" placeholder="请输入密码" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="password" placeholder="请输入密码" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->

12
packages/field/demo/index.vue
View File

@ -11,10 +11,11 @@
<van-field <van-field
v-model="username" v-model="username"
:label="$t('username')" :label="$t('username')"
icon="clear"
:placeholder="$t('usernamePlaceholder')" :placeholder="$t('usernamePlaceholder')"
clearable
icon="question"
required required
@click-icon="username = ''" @click-icon="$toast('question')"
/> />
<van-field <van-field
@ -72,11 +73,10 @@
<van-cell-group> <van-cell-group>
<van-field <van-field
center center
clearable
v-model="sms" v-model="sms"
:label="$t('sms')" :label="$t('sms')"
:placeholder="$t('smsPlaceholder')" :placeholder="$t('smsPlaceholder')"
icon="clear"
@click-icon="sms = ''"
> >
<van-button slot="button" size="small" type="primary">{{ $t('sendSMS') }}</van-button> <van-button slot="button" size="small" type="primary">{{ $t('sendSMS') }}</van-button>
</van-field> </van-field>
@ -139,5 +139,9 @@ export default {
<style lang="postcss"> <style lang="postcss">
.demo-field { .demo-field {
padding-bottom: 30px; padding-bottom: 30px;
.van-field__icon {
color: #38f;
}
} }
</style> </style>

15
packages/field/en-US.md
View File

@ -25,11 +25,12 @@ Use `type` prop to custom diffrent type fields.
<van-cell-group> <van-cell-group>
<van-field <van-field
v-model="username" v-model="username"
label="Username"
icon="clear"
placeholder="Username"
required required
@click-icon="username = ''" clearable
label="Username"
icon="question"
placeholder="Username"
@click-icon="$toast('question')"
/> />
<van-field <van-field
@ -97,12 +98,11 @@ Use button slot to insert button
```html ```html
<van-cell-group> <van-cell-group>
<van-field <van-field
center
v-model="sms" v-model="sms"
center
clearable
label="SMS" label="SMS"
placeholder="SMS" placeholder="SMS"
icon="clear"
@click-icon="sms = ''"
> >
<van-button slot="button" size="small" type="primary">Send SMS</van-button> <van-button slot="button" size="small" type="primary">Send SMS</van-button>
</van-field> </van-field>
@ -119,6 +119,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
| label | Field label | `String` | - | | label | Field label | `String` | - |
| type | Input type | `String` | `text` | | type | Input type | `String` | `text` |
| disabled | Disable field | `Boolean` | `false` | | disabled | Disable field | `Boolean` | `false` |
| clearable | Whether to be clearable | `Boolean` | `false` |
| error | Whether to show error info | `Boolean` | `false` | | error | Whether to show error info | `Boolean` | `false` |
| error-message | Error message | `String` | `''` | | error-message | Error message | `String` | `''` |
| autosize | Textarea auto resize，can accpet an object, e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` | | autosize | Textarea auto resize，can accpet an object, e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` |

88
packages/field/index.vue
View File

@ -8,45 +8,48 @@
:class="b({ :class="b({
error, error,
disabled: $attrs.disabled, disabled: $attrs.disabled,
'has-icon': showIcon,
'min-height': type === 'textarea' && !autosize 'min-height': type === 'textarea' && !autosize
})" })"
> >
<slot name="label" slot="title" /> <slot name="label" slot="title" />
<textarea <div :class="b('body')">
v-if="type === 'textarea'" <textarea
v-bind="$attrs" v-if="type === 'textarea'"
v-on="listeners" v-bind="$attrs"
ref="input" v-on="listeners"
:class="b('control')" ref="input"
:value="value" :class="b('control')"
/> :value="value"
<input />
v-else <input
v-bind="$attrs" v-else
v-on="listeners" v-bind="$attrs"
ref="input" v-on="listeners"
:class="b('control')" ref="input"
:type="type" :class="b('control')"
:value="value" :type="type"
> :value="value"
>
<icon
v-if="showClear"
name="clear"
:class="b('clear')"
@touchstart.prevent="$emit('input', '')"
/>
<div v-if="$slots.icon || icon" :class="b('icon')" @click="onClickIcon">
<slot name="icon">
<icon :name="icon" />
</slot>
</div>
<div v-if="$slots.button" :class="b('button')">
<slot name="button" />
</div>
</div>
<div <div
v-if="errorMessage" v-if="errorMessage"
v-text="errorMessage" v-text="errorMessage"
:class="b('error-message')" :class="b('error-message')"
/> />
<div
v-if="showIcon"
:class="b('icon')"
@touchstart.prevent="onClickIcon"
>
<slot name="icon">
<icon :name="icon" />
</slot>
</div>
<div v-if="$slots.button" :class="b('button')" slot="extra">
<slot name="button" />
</div>
</cell> </cell>
</template> </template>
@ -67,6 +70,7 @@ export default create({
center: Boolean, center: Boolean,
leftIcon: String, leftIcon: String,
required: Boolean, required: Boolean,
clearable: Boolean,
onIconClick: Function, onIconClick: Function,
autosize: [Boolean, Object], autosize: [Boolean, Object],
errorMessage: String, errorMessage: String,
@ -80,6 +84,12 @@ export default create({
} }
}, },
data() {
return {
focused: false
};
},
watch: { watch: {
value() { value() {
this.$nextTick(this.adjustSize); this.$nextTick(this.adjustSize);
@ -91,15 +101,17 @@ export default create({
}, },
computed: { computed: {
showIcon() { showClear() {
return this.$slots.icon || (this.icon && this.value !== '' && this.isDef(this.value)); return this.clearable && this.focused && this.value !== '' && this.isDef(this.value);
}, },
listeners() { listeners() {
return { return {
...this.$listeners, ...this.$listeners,
input: this.onInput, input: this.onInput,
keypress: this.onKeypress keypress: this.onKeypress,
focus: this.onFocus,
blur: this.onBlur
}; };
} }
}, },
@ -113,6 +125,16 @@ export default create({
this.$emit('input', event.target.value); this.$emit('input', event.target.value);
}, },
onFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
this.focused = false;
this.$emit('blur', event);
},
onClickIcon() { onClickIcon() {
this.$emit('click-icon'); this.$emit('click-icon');
this.onIconClick && this.onIconClick(); this.onIconClick && this.onIconClick();

82
packages/field/test/__snapshots__/demo.spec.js.snap
View File

@ -8,9 +8,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<input type="text" placeholder="请输入用户名" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -25,9 +28,16 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" placeholder="请输入用户名" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!----> <!---->
<div class="van-field__icon">
<i class="van-icon van-icon-question" style="color:undefined;">
<!---->
</i>
</div>
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -38,9 +48,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="password" placeholder="请输入密码" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="password" placeholder="请输入密码" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -57,9 +70,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -74,9 +90,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" placeholder="请输入用户名" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -87,10 +106,13 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" placeholder="请输入手机号" value="1365577" class="van-field__control"> <div class="van-field__body">
<input type="text" placeholder="请输入手机号" value="1365577" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<div class="van-field__error-message">手机号格式错误</div> <div class="van-field__error-message">手机号格式错误</div>
<!---->
<!---->
</div> </div>
<!----> <!---->
</div> </div>
@ -104,9 +126,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea> <div class="van-field__body">
<!----> <textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea>
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -121,15 +146,18 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<input type="text" placeholder="请输入短信验证码" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">
<!---->
<!---->
<div class="van-field__button">
<button class="van-button van-button--primary van-button--small">
<!----><span class="van-button__text">发送验证码</span></button>
</div>
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
<div class="van-field__button">
<button class="van-button van-button--primary van-button--small">
<!----><span class="van-button__text">发送验证码</span></button>
</div>
</div> </div>
</div> </div>
</div> </div>

9
packages/field/test/__snapshots__/index.spec.js.snap
View File

@ -5,9 +5,12 @@ exports[`render textarea 1`] = `
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<textarea class="van-field__control" style="height: auto;"></textarea> <div class="van-field__body">
<!----> <textarea class="van-field__control" style="height: auto;"></textarea>
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->

10
packages/field/test/index.spec.js
View File

@ -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(wrapper.emitted('click-icon')).toBeTruthy();
expect(onIconClick.mock.calls.length).toBe(1); expect(onIconClick.mock.calls.length).toBe(1);
}); });
@ -102,11 +102,9 @@ test('autosize object', async() => {
test('blur method', () => { test('blur method', () => {
const fn = jest.fn(); const fn = jest.fn();
const wrapper = mount(Field, { const wrapper = mount(Field);
listeners: {
blur: fn wrapper.vm.$on('blur', fn);
}
});
wrapper.find('input').element.focus(); wrapper.find('input').element.focus();
wrapper.vm.blur(); wrapper.vm.blur();

15
packages/field/zh-CN.md
View File

@ -27,11 +27,12 @@ Vue.use(Field);
<van-cell-group> <van-cell-group>
<van-field <van-field
v-model="username" v-model="username"
label="用户名"
icon="clear"
placeholder="请输入用户名"
required required
@click-icon="username = ''" clearable
label="用户名"
icon="question"
placeholder="请输入用户名"
@click-icon="$toast('question')"
/> />
<van-field <van-field
@ -99,12 +100,11 @@ Vue.use(Field);
```html ```html
<van-cell-group> <van-cell-group>
<van-field <van-field
center
v-model="sms" v-model="sms"
center
clearable
label="短信验证码" label="短信验证码"
placeholder="请输入短信验证码" placeholder="请输入短信验证码"
icon="clear"
@click-icon="sms = ''"
> >
<van-button slot="button" size="small" type="primary">发送验证码</van-button> <van-button slot="button" size="small" type="primary">发送验证码</van-button>
</van-field> </van-field>
@ -121,6 +121,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
| value | 当前输入的值 | `String | Number` | - | | value | 当前输入的值 | `String | Number` | - |
| type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` | | type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
| disabled | 是否禁用输入框 | `Boolean` | `false` | | disabled | 是否禁用输入框 | `Boolean` | `false` |
| clearable | 输入框内容是否可清除 | `Boolean` | `false` |
| error | 是否将输入内容标红 | `Boolean` | `false` | | error | 是否将输入内容标红 | `Boolean` | `false` |
| error-message | 底部错误提示文案 | `String` | `''` | | error-message | 底部错误提示文案 | `String` | `''` |
| autosize | 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | | autosize | 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` |

5
packages/search/index.vue
View File

@ -4,11 +4,10 @@
<field <field
v-bind="$attrs" v-bind="$attrs"
v-on="listeners" v-on="listeners"
:value="value" clearable
type="search" type="search"
icon="clear" :value="value"
:border="false" :border="false"
@click-icon="$emit('input', '')"
/> />
<div v-if="showAction" :class="b('action')" > <div v-if="showAction" :class="b('action')" >
<slot name="action"> <slot name="action">

27
packages/search/test/__snapshots__/demo.spec.js.snap
View File

@ -11,9 +11,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -31,9 +34,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->
@ -53,9 +59,12 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<input type="search" value="" class="van-field__control"> <div class="van-field__body">
<!----> <input type="search" value="" class="van-field__control">
<!----> <!---->
<!---->
<!---->
</div>
<!----> <!---->
</div> </div>
<!----> <!---->

1
packages/vant-css/src/address-edit.css
View File

@ -30,5 +30,6 @@
&-detail__finish { &-detail__finish {
color: $blue; color: $blue;
font-size: 12px; font-size: 12px;
display: block;
} }
} }

38
packages/vant-css/src/field.css
View File

@ -9,6 +9,11 @@
position: relative; position: relative;
} }
&__body {
display: flex;
align-items: center;
}
&__control { &__control {
border: 0; border: 0;
margin: 0; margin: 0;
@ -25,17 +30,24 @@
} }
} }
&__icon { &__clear,
position: absolute; &__icon,
right: 0; &__button {
top: 50%; flex-shrink: 0;
color: $gray-dark; }
padding: 10px 0 10px 10px;
transform: translate3d(0, -50%, 0);
.van-icon { &__clear,
display: block; &__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 { &__button {
@ -68,10 +80,4 @@
min-height: 60px; min-height: 60px;
} }
} }
&--has-icon {
.van-field__control {
padding-right: 20px;
}
}
} }