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"
rows="1"
autosize
:clearable="!isAndroid"
type="textarea"
maxlength="200"
:value="value"
:error="error"
:label="$t('label')"
:placeholder="$t('placeholder')"
@click-icon="onClickIcon"
>
<div slot="icon">
<span v-if="showIcon && isAndroid" :class="b('finish')">{{ $t('complete') }}</span>
<icon v-else-if="showIcon" name="clear" />
</div>
<span
v-if="showIcon && isAndroid"
slot="icon"
:class="b('finish')"
@click="$refs.field.blur()"
>
{{ $t('complete') }}
</span>
</field>
<cell
v-if="showSearchList"
@ -66,14 +70,6 @@ export default create({
},
methods: {
onClickIcon() {
if (this.isAndroid) {
this.$refs.field.blur();
} else {
this.$emit('input', '');
}
},
onSelect(express) {
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
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 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>
<!---->
@ -24,9 +27,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -37,26 +43,28 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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 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>
<div class="van-cell__value">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
<!---->
<div class="van-field__icon">
<div>
<!---->
</div>
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
</div>
@ -69,9 +77,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->

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

@ -9,9 +9,12 @@ exports[`create a AddressEdit 1`] = `
<!---->
</div>
<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>
<!---->
@ -22,9 +25,12 @@ exports[`create a AddressEdit 1`] = `
<!---->
</div>
<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>
<!---->
@ -35,26 +41,28 @@ exports[`create a AddressEdit 1`] = `
<!---->
</div>
<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 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>
<div class="van-cell__value">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
<!---->
<div class="van-field__icon">
<div>
<!---->
</div>
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
</div>
@ -98,9 +106,12 @@ exports[`create a AddressEdit with props 1`] = `
<!---->
</div>
<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>
<!---->
@ -111,9 +122,12 @@ exports[`create a AddressEdit with props 1`] = `
<!---->
</div>
<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>
<!---->
@ -124,26 +138,28 @@ exports[`create a AddressEdit with props 1`] = `
<!---->
</div>
<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 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>
<div class="van-cell__value">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control">详细地址</textarea>
<!---->
<div class="van-field__icon">
<div>
<!---->
</div>
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control">详细地址</textarea>
<!---->
<!---->
<!---->
</div>
<!---->
</div>
@ -156,9 +172,12 @@ exports[`create a AddressEdit with props 1`] = `
<!---->
</div>
<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>
<!---->

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

@ -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' }});

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

@ -53,9 +53,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -66,9 +69,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->

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

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

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

@ -24,9 +24,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -37,9 +40,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->

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

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

88
packages/field/index.vue
View File

@ -8,45 +8,48 @@
:class="b({
error,
disabled: $attrs.disabled,
'has-icon': showIcon,
'min-height': type === 'textarea' && !autosize
})"
>
<slot name="label" slot="title" />
<textarea
v-if="type === 'textarea'"
v-bind="$attrs"
v-on="listeners"
ref="input"
:class="b('control')"
:value="value"
/>
<input
v-else
v-bind="$attrs"
v-on="listeners"
ref="input"
:class="b('control')"
:type="type"
:value="value"
>
<div :class="b('body')">
<textarea
v-if="type === 'textarea'"
v-bind="$attrs"
v-on="listeners"
ref="input"
:class="b('control')"
:value="value"
/>
<input
v-else
v-bind="$attrs"
v-on="listeners"
ref="input"
:class="b('control')"
: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
v-if="errorMessage"
v-text="errorMessage"
: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>
</template>
@ -67,6 +70,7 @@ export default create({
center: Boolean,
leftIcon: String,
required: Boolean,
clearable: Boolean,
onIconClick: Function,
autosize: [Boolean, Object],
errorMessage: String,
@ -80,6 +84,12 @@ export default create({
}
},
data() {
return {
focused: false
};
},
watch: {
value() {
this.$nextTick(this.adjustSize);
@ -91,15 +101,17 @@ export default create({
},
computed: {
showIcon() {
return this.$slots.icon || (this.icon && this.value !== '' && this.isDef(this.value));
showClear() {
return this.clearable && this.focused && this.value !== '' && this.isDef(this.value);
},
listeners() {
return {
...this.$listeners,
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);
},
onFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
this.focused = false;
this.$emit('blur', event);
},
onClickIcon() {
this.$emit('click-icon');
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">
<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>
<!---->
@ -25,9 +28,16 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -38,9 +48,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -57,9 +70,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -74,9 +90,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -87,10 +106,13 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
</div>
@ -104,9 +126,12 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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>
<!---->
@ -121,15 +146,18 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<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 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>

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">
<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>
<!---->

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(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();

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

@ -27,11 +27,12 @@ Vue.use(Field);
<van-cell-group>
<van-field
v-model="username"
label="用户名"
icon="clear"
placeholder="请输入用户名"
required
@click-icon="username = ''"
clearable
label="用户名"
icon="question"
placeholder="请输入用户名"
@click-icon="$toast('question')"
/>
<van-field
@ -99,12 +100,11 @@ Vue.use(Field);
```html
<van-cell-group>
<van-field
center
v-model="sms"
center
clearable
label="短信验证码"
placeholder="请输入短信验证码"
icon="clear"
@click-icon="sms = ''"
>
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
</van-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` |

5
packages/search/index.vue
View File

@ -4,11 +4,10 @@
<field
v-bind="$attrs"
v-on="listeners"
:value="value"
clearable
type="search"
icon="clear"
:value="value"
:border="false"
@click-icon="$emit('input', '')"
/>
<div v-if="showAction" :class="b('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">
<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>
<!---->
@ -31,9 +34,12 @@ exports[`renders demo correctly 1`] = `
<!---->
<!---->
<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>
<!---->
@ -53,9 +59,12 @@ exports[`renders demo correctly 1`] = `
<!---->
<!---->
<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>
<!---->

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

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

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

@ -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;
}
}
}