[new feature] Field: add input slot

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`
 

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 |

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 (
+          <div class={bem('control', this.inputAlign)}>
+            {inputSlot}
+          </div>
+        );
+      }
+
       const inputProps = {
         ref: 'input',
         class: bem('control', this.inputAlign),

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;

packages/field/test/__snapshots__/index.spec.js.snap

@@ -44,6 +44,16 @@ exports[`label-width prop without unit 1`] = `
 </div>
 `;
 
+exports[`render input slot 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body">
+      <div class="van-field__control">Custom Input</div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`render label slot 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">Custom Label</div>

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: `
+      <field>
+        <template v-slot:input>Custom Input</template>
+      </field>
+    `,
+    components: {
+      Field
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('render label slot', () => {
   const wrapper = mount({
     template: `

packages/field/zh-CN.md

@@ -174,6 +174,7 @@ Field 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k
 | 名称 | 说明 |
 |------|------|
 | label | 自定义输入框标签 |
+| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
 | left-icon | 自定义输入框头部图标 |
 | right-icon | 自定义输入框尾部图标 |
 | button | 自定义输入框尾部按钮 |