diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 416b6c4ce..bf7f693e7 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -1,5 +1,12 @@
# 更新日志
+### [v2.0.0-beta.5](https://github.com/youzan/vant/tree/v2.0.0-beta.5)
+
+##### Field
+
+- 新增`input`插槽
+
+
### [v2.0.0-beta.4](https://github.com/youzan/vant/tree/v2.0.0-beta.4)
`2019-06-05`
diff --git a/packages/field/en-US.md b/packages/field/en-US.md
index 5ef88d25b..dd54edd13 100644
--- a/packages/field/en-US.md
+++ b/packages/field/en-US.md
@@ -171,6 +171,7 @@ Use ref to get field instance and call instance methods
| Name | Description |
|------|------|
| label | Custom label |
+| input | Custom input |
| left-icon | Custom left icon |
| right-icon | Custom right icon |
| button | Insert button |
diff --git a/packages/field/index.js b/packages/field/index.js
index fe9656107..98258c253 100644
--- a/packages/field/index.js
+++ b/packages/field/index.js
@@ -82,15 +82,23 @@ export default sfc({
methods: {
focus() {
- this.$refs.input && this.$refs.input.focus();
+ if (this.$refs.input) {
+ this.$refs.input.focus();
+ }
},
blur() {
- this.$refs.input && this.$refs.input.blur();
+ if (this.$refs.input) {
+ this.$refs.input.blur();
+ }
},
// native maxlength not work when type = number
format(target = this.$refs.input) {
+ if (!target) {
+ return;
+ }
+
let { value } = target;
const { maxlength } = this.$attrs;
@@ -200,6 +208,16 @@ export default sfc({
},
renderInput() {
+ const inputSlot = this.slots('input');
+
+ if (inputSlot) {
+ return (
+
+ {inputSlot}
+
+ );
+ }
+
const inputProps = {
ref: 'input',
class: bem('control', this.inputAlign),
diff --git a/packages/field/index.less b/packages/field/index.less
index 410d188b8..cc3e12ab0 100644
--- a/packages/field/index.less
+++ b/packages/field/index.less
@@ -26,6 +26,7 @@
margin: 0;
padding: 0;
color: @field-input-text-color;
+ text-align: left;
background-color: transparent;
border: 0;
resize: none;
diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap
index 4940bd6be..a476377a9 100644
--- a/packages/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/field/test/__snapshots__/index.spec.js.snap
@@ -44,6 +44,16 @@ exports[`label-width prop without unit 1`] = `
`;
+exports[`render input slot 1`] = `
+
+`;
+
exports[`render label slot 1`] = `
Custom Label
diff --git a/packages/field/test/index.spec.js b/packages/field/test/index.spec.js
index a7c0c1bf9..dbb0d8f6b 100644
--- a/packages/field/test/index.spec.js
+++ b/packages/field/test/index.spec.js
@@ -167,6 +167,21 @@ test('clearable', () => {
expect(wrapper.emitted('clear')).toBeTruthy();
});
+test('render input slot', () => {
+ const wrapper = mount({
+ template: `
+
+ Custom Input
+
+ `,
+ components: {
+ Field
+ }
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
test('render label slot', () => {
const wrapper = mount({
template: `
diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md
index 8ab50c305..7446652fa 100644
--- a/packages/field/zh-CN.md
+++ b/packages/field/zh-CN.md
@@ -174,6 +174,7 @@ Field 默认支持 Input 标签所有的原生事件,如 `focus`、`blur`、`k
| 名称 | 说明 |
|------|------|
| label | 自定义输入框标签 |
+| input | 自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效 |
| left-icon | 自定义输入框头部图标 |
| right-icon | 自定义输入框尾部图标 |
| button | 自定义输入框尾部按钮 |