diff --git a/docs/demos/views/field.vue b/docs/demos/views/field.vue
index 1fbde7350..df5fe05d6 100644
--- a/docs/demos/views/field.vue
+++ b/docs/demos/views/field.vue
@@ -35,7 +35,12 @@
-
+
+
+
+
+
+ {{ $t('sendSMS') }}
+
+
+
@@ -68,8 +88,12 @@ export default {
title3: '禁用输入框',
title4: '错误提示',
title5: '高度自适应',
+ title6: '插入按钮',
message: '留言',
phone: '手机号',
+ sms: '短信验证码',
+ sendSMS: '发送验证码',
+ smsPlaceholder: '请输入短信验证码',
phonePlaceholder: '请输入手机号',
messagePlaceholder: '请输入留言',
inputDisabled: '输入框已禁用',
@@ -80,8 +104,12 @@ export default {
title3: 'Disabled',
title4: 'Error info',
title5: 'Auto resize',
+ title6: 'Insert button',
message: 'Message',
phone: 'Phone',
+ sms: 'SMS',
+ sendSMS: 'Send SMS',
+ smsPlaceholder: 'SMS',
phonePlaceholder: 'Phone',
messagePlaceholder: 'Message',
inputDisabled: 'Disabled',
@@ -91,9 +119,11 @@ export default {
data() {
return {
+ sms: '',
value: '',
password: '',
username: '',
+ username2: '',
message: '',
phone: '1365577'
};
diff --git a/docs/markdown/en-US/field.md b/docs/markdown/en-US/field.md
index 810e06076..073f1218e 100644
--- a/docs/markdown/en-US/field.md
+++ b/docs/markdown/en-US/field.md
@@ -60,11 +60,13 @@ Use `error` or `error-message` to show error info
```html
```
+#### Insert button
+Use button slot to insert button
+
+```html
+
+
+ Send SMS
+
+
+```
+
### API
Filed support all native properties of input tag，such as `maxlength`、`placeholder`、`readonly`、`autofocus`
@@ -114,3 +134,4 @@ Filed support all native events of input tag，such as `focus`、`blur`、`keypr
| name | Description |
|-----------|-----------|
| icon | Custom icon |
+| button | Insert button |
diff --git a/docs/markdown/zh-CN/field.md b/docs/markdown/zh-CN/field.md
index c8c161342..0805d8504 100644
--- a/docs/markdown/zh-CN/field.md
+++ b/docs/markdown/zh-CN/field.md
@@ -62,11 +62,13 @@ Vue.use(Field);
```html
```
+#### 插入按钮
+通过 button slot 可以在输入框尾部插入按钮
+
+```html
+
+
+ 发送验证码
+
+
+```
+
### API
Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`readonly`、`autofocus` 等
@@ -115,4 +135,5 @@ Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k
| 名称 | 说明 |
|-----------|-----------|
-| icon | 自定义icon |
+| icon | 自定义输入框尾部图标 |
+| button | 自定义输入框尾部按钮 |
diff --git a/packages/field/index.vue b/packages/field/index.vue
index 768d13a43..81ab0b345 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -1,17 +1,14 @@
|
+
+
+
|
@@ -66,6 +66,7 @@ export default create({
icon: String,
label: String,
error: Boolean,
+ center: Boolean,
border: Boolean,
required: Boolean,
autosize: [Boolean, Object],
diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css
index da4414a69..355a22504 100644
--- a/packages/vant-css/src/cell.css
+++ b/packages/vant-css/src/cell.css
@@ -75,6 +75,10 @@
}
}
+ &--center {
+ align-items: center;
+ }
+
&__right-icon {
position: absolute;
top: 50%;
diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css
index b89ce255a..bcc1903a1 100644
--- a/packages/vant-css/src/field.css
+++ b/packages/vant-css/src/field.css
@@ -1,10 +1,43 @@
@import './common/var.css';
.van-field {
- width: 100%;
-
.van-cell__title {
- width: 90px;
+ min-width: 90px;
+ }
+
+ .van-cell__value {
+ position: relative;
+ }
+
+ &__control {
+ border: 0;
+ padding: 0;
+ display: block;
+ width: 100%;
+ resize: none;
+ box-sizing: border-box;
+
+ &:disabled {
+ opacity: 1;
+ color: $gray-darker;
+ background-color: transparent;
+ }
+ }
+
+ &__icon {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ padding: 10px 0 10px 10px;
+ transform: translate3d(0, -50%, 0);
+
+ .van-icon {
+ display: block;
+ }
+ }
+
+ &__button {
+ padding-left: 10px;
}
&__error-message {
@@ -13,23 +46,6 @@
text-align: left;
}
- &--has-textarea {
- .van-field__control {
- min-height: 60px;
- }
- }
-
- &--nolabel {
- .van-cell__title {
- display: none;
- }
-
- .van-cell__value {
- width: 100%;
- padding-left: 0;
- }
- }
-
&--disabled {
.van-field__control {
color: $gray-dark;
@@ -45,54 +61,15 @@
}
}
- &--border {
+ &--min-height {
.van-field__control {
- padding-left: 10px;
- }
-
- &::after {
- border-radius: 2px;
- }
- }
-
- &--autosize {
- .van-field__control {
- min-height: 0;
+ min-height: 60px;
}
}
&--has-icon {
.van-field__control {
- width: 90%;
- }
- }
-
- &__control {
- border: 0;
- font-size: 14px;
- line-height: 24px;
- height: 24px;
- padding: 0;
- display: block;
- width: 100%;
- resize: none;
-
- &:disabled {
- opacity: 1;
- color: $gray-darker;
- background-color: transparent;
- }
- }
-
- &__icon {
- position: absolute;
- right: 0;
- top: 50%;
- transform: translate3d(0, -50%, 0);
- padding: 10px;
-
- .van-icon {
- display: block;
+ padding-right: 20px;
}
}
}
diff --git a/test/specs/field.spec.js b/test/specs/field.spec.js
index 2a33d505c..5a0495401 100644
--- a/test/specs/field.spec.js
+++ b/test/specs/field.spec.js
@@ -19,18 +19,6 @@ describe('Field', () => {
expect(wrapper.hasClass('van-field')).to.be.true;
});
- it('create a border field', () => {
- wrapper = mount(Field, {
- propsData: {
- type: 'text',
- border: true
- }
- });
-
- expect(wrapper.hasClass('van-field')).to.be.true;
- expect(wrapper.hasClass('van-field--border')).to.be.true;
- });
-
it('create a text field with initialize value', (done) => {
wrapper = mount(Field, {
propsData: {
@@ -69,14 +57,12 @@ describe('Field', () => {
it('create a textarea field', (done) => {
wrapper = mount(Field, {
propsData: {
- type: 'textarea',
- autosize: true
+ type: 'textarea'
}
});
setTimeout(() => {
- expect(wrapper.hasClass('van-field')).to.be.true;
- expect(wrapper.hasClass('van-field--has-textarea')).to.be.true;
+ expect(wrapper.hasClass('van-field--min-height')).to.be.true;
done();
}, 50);
});
@@ -93,9 +79,6 @@ describe('Field', () => {
wrapper.vm.value = val;
});
- expect(wrapper.hasClass('van-field')).to.be.true;
- expect(wrapper.hasClass('van-field--autosize')).to.be.true;
-
const textarea = wrapper.find('.van-field__control')[0];
const textareaElement = textarea.element;
const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
@@ -128,9 +111,6 @@ describe('Field', () => {
wrapper.vm.value = val;
});
- expect(wrapper.hasClass('van-field')).to.be.true;
- expect(wrapper.hasClass('van-field--autosize')).to.be.true;
-
const textarea = wrapper.find('.van-field__control')[0];
const textareaElement = textarea.element;