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`] = ` +
+
+
+
Custom Input
+
+
+
+`; + 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: ` + + + + `, + 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 | 自定义输入框尾部按钮 |