From 72b013a44099b4544a64f04c6b5278c00ad3a5bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Fri, 22 Sep 2017 14:54:05 +0800
Subject: [PATCH] Field: support $attrs & $listeners

---
 docs/examples-docs/field.md     | 139 ++++++++++++++------------------
 docs/src/ExamplesApp.vue        |  86 +-------------------
 docs/src/examples.js            |   5 +-
 docs/src/index.js               |   5 +-
 packages/field/index.vue        | 118 ++++++++++-----------------
 packages/vant-css/src/field.css |   2 +-
 test/unit/specs/field.spec.js   |  36 +++------
 yarn.lock                       |   4 +-
 8 files changed, 121 insertions(+), 274 deletions(-)

diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index 377ab8bfd..4865b5746 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -1,8 +1,6 @@
 <style>
 .demo-field {
-  .van-field-wrapper {
-    padding: 0 10px;
-  }
+  padding-bottom: 30px;
 }
 </style>
 
@@ -10,17 +8,11 @@
 export default {
   data() {
     return {
-      username: 'zhangmin'
+      value: '',
+      password: '',
+      username: 'zhangmin',
+      message: ''
     };
-  },
-  methods: {
-    onIconClick() {
-      this.username = '';
-    },
-
-    onFieldBlur() {
-      console.log('blured');
-    }
   }
 };
 </script>
@@ -39,92 +31,78 @@ Vue.component(Field.name, Field);
 ### 代码演示
 
 #### 基础用法
-
-根据`type`属性显示不同的输入框。
+通过 v-model 绑定输入框的值
 
 :::demo 基础用法
 ```html
+<van-cell-group>
+  <van-field v-model="value" placeholder="请输入用户名"></van-field>
+</van-cell-group>
+```
+:::
+
+#### 自定义类型
+根据`type`属性定义不同类型的输入框
+
+:::demo 自定义类型
+```html
 <van-cell-group>
   <van-field
-    type="text"
-    label="用户名："
-    placeholder="请输入用户名"
     v-model="username"
+    label="用户名"
     icon="clear"
-    :on-icon-click="onIconClick"
-    @blur="onFieldBlur"
-    required></van-field>
+    placeholder="请输入用户名"
+    required
+    @click-icon="username = ''"
+  >
+  </van-field>
+
   <van-field
+    v-model="password"
     type="password"
-    label="密码："
+    label="密码"
     placeholder="请输入密码"
     required>
-    <template slot="icon">
-      <van-icon name="search"></van-icon>
-    </template>
   </van-field>
-  <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 无label的输入框
+#### 禁用输入框
 
-不传入`label`属性即可。
-
-:::demo 无label的输入框
+:::demo 禁用输入框
 ```html
 <van-cell-group>
-  <van-field type="text" placeholder="请输入用户名"></van-field>
+  <van-field value="输入框已禁用" label="用户名" disabled></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 带border的输入框
+#### 错误提示
 
-传入一个`border`属性。
-
-:::demo 带border的输入框
-```html
-<div class="van-field-wrapper">
-  <van-field type="text" placeholder="请输入用户名" border></van-field>
-</div>
-```
-:::
-
-#### 禁用的输入框
-
-传入`disabled`属性即可。
-
-:::demo 禁用的输入框
+:::demo 错误提示
 ```html
 <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
+  <van-field label="用户名" placeholder="请输入用户名" error></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 错误的输入框
+#### 高度自适应
+对于 textarea，可以通过`autosize`属性设置高度自适应
 
-传入`error`属性即可。
-
-:::demo 错误的输入框
+:::demo 高度自适应
 ```html
 <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
-</van-cell-group>
-```
-:::
-
-
-#### Autosize的输入框(仅支持textarea)
-
-传入`autosize`属性, 且将`rows`设为1。
-
-:::demo 错误的输入框
-```html
-<van-cell-group>
-  <van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
+  <van-field
+    v-model="message"
+    label="留言"
+    type="textarea"
+    placeholder="请输入留言"
+    rows="1"
+    autosize
+  >
+  </van-field>
 </van-cell-group>
 ```
 :::
@@ -133,23 +111,24 @@ Vue.component(Field.name, Field);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 输入框类型 | `String`  | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea`  |
-| placeholder | 输入框placeholder | `String`  |  |   |
-| value | 输入框的值 | `String`  |  |   |
-| label | 输入框标签 | `String`  |  |   |
-| disabled | 是否禁用输入框 | `Boolean`  | `false` |   |
-| error | 输入框是否有错误 | `Boolean`  | `false` |   |
-| readonly | 输入框是否只读 | `Boolean`  | `false` |   |
-| maxlength | 输入框maxlength | `String`, `Number`  |  |   |
-| rows | textarea rows | `String`, `Number`   |  |   |
-| cols | textarea cols | `String`, `Number`  |  |   |
-| autosize | 自动调整高度(仅支持textarea) | `Boolean`  | `false` |  `true`, `false` |
-| icon | 输入框尾部图标 | `String`  |  |  icon中支持的类型 |
-| onIconClick | 点击图标的回调函数 | `Function`  |  |  |
+| type | 输入框类型 | `String`  | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
+| value | 输入框的值 | `String`  | - | - |
+| label | 输入框标签 | `String`  | - | - |
+| disabled | 是否禁用输入框 | `Boolean`  | `false` | - |
+| error | 输入框是否有错误 | `Boolean`  | `false` | - |
+| autosize | 高度自适应(仅支持textarea) | `Boolean`  | `false` | - |
+| icon | 输入框尾部图标 | `String`  | - |  Icon 组件支持的类型 |
+
+### Event
+
+| 事件名称       | 说明      | 回调参数 |
+|-----------|-----------|-----------|
+| focus | 输入框聚焦时触发 | - |
+| blur | 输入框失焦时触发 | - |
+| click-icon | 点击尾部图标时触发 | - |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
 | icon | 自定义icon |
-
diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue
index ae9d63a7a..201ab0f1e 100644
--- a/docs/src/ExamplesApp.vue
+++ b/docs/src/ExamplesApp.vue
@@ -1,93 +1,9 @@
 <template>
-  <div class="examples-container" ref="container">
-    <div class="demo-content" ref="demo">
-      <router-view></router-view>
-    </div>
-    <div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
-      <img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
-    </div>
-  </div>
+  <router-view></router-view>
 </template>
 
-<script>
-export default {
-  computed: {
-    visible() {
-      return ['/'].indexOf(this.$route.path) < 0;
-    }
-  },
-
-  data() {
-    return {
-      isFooterFixed: false
-    };
-  },
-
-  mounted() {
-    this.computeFooterFixed();
-  },
-
-  watch: {
-    '$route.path'(val) {
-      this.$nextTick(() => {
-        this.computeFooterFixed();
-      });
-    }
-  },
-
-  methods: {
-    computeFooterFixed() {
-      if (this.$refs.container) {
-        const demoSize = this.$refs.demo.getBoundingClientRect();
-        const containerSize = this.$refs.container.getBoundingClientRect();
-        if (demoSize.height < containerSize.height - 54) {
-          this.isFooterFixed = true;
-          return;
-        }
-      }
-      this.isFooterFixed = false;
-    }
-  }
-};
-</script>
-
 <style>
 body {
   -webkit-font-smoothing: antialiased;    
 }
-
-body, html {
-  height: 100%;
-}
-
-.examples-container {
-  height: 100%;
-  overflow: auto;
-  position: relative;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    width: 0;
-  }
-}
-
-.footer {
-  margin-top: 30px;
-  width: 100%;
-  padding: 10px 0 20px;
-  background: #f8f8f8;
-  
-  &.footer-fixed {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-}
-
-.zanui-logo {
-  display: block;
-  margin: 0 auto;
-  width: 150px;
-  height: auto;
-}
 </style>
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 50a74e6e4..edeb94775 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -42,5 +42,6 @@ if (process.env.NODE_ENV !== 'production') {
 
 new Vue({ // eslint-disable-line
   render: h => h(App),
-  router
-}).$mount('#app-container');
+  router,
+  el: '#app-container'
+});
diff --git a/docs/src/index.js b/docs/src/index.js
index 2133b5ed0..bb2d3d9e2 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -41,5 +41,6 @@ if (process.env.NODE_ENV !== 'production') {
 
 new Vue({ // eslint-disable-line
   render: h => h(App),
-  router
-}).$mount('#app-container');
+  router,
+  el: '#app-container'
+});
diff --git a/packages/field/index.vue b/packages/field/index.vue
index e7b5cb489..ba281a720 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -1,47 +1,43 @@
 <template>
   <van-cell
-    class="van-field"
     :title="label"
     :required="required"
-    :class="{
-      'van-field--hastextarea': type === 'textarea',
+    :class="['van-field', {
+      'van-field--has-textarea': type === 'textarea',
       'van-field--nolabel': !label,
-      'van-field--disabled': disabled,
+      'van-field--disabled': $attrs.disabled,
       'van-field--error': error,
       'van-field--border': border,
-      'van-hairline--surround': border,
       'van-field--autosize': autosize,
-      'van-field--has-icon': showIcon
-    }">
+      'van-field--has-icon': hasIcon,
+      'van-hairline--surround': border
+    }]">
     <textarea
       v-if="type === 'textarea'"
-      ref="textareaElement"
+      v-bind="$attrs"
+      v-on="$listeners"
+      ref="textarea"
       class="van-field__control"
-      v-model="currentValue"
-      @focus="handleInputFocus"
-      @blur="handleInputBlur"
-      :placeholder="placeholder"
-      :maxlength="maxlength"
-      :disabled="disabled"
-      :readonly="readonly"
-      :rows="rows"
-      :cols="cols">
-    </textarea>
+      :value="value"
+      @input="onInput"
+    />
     <input
       v-else
+      v-bind="$attrs"
+      v-on="$listeners"      
       class="van-field__control"
-      :value="currentValue"
-      @input="handleInput"
-      @focus="handleInputFocus"
-      @blur="handleInputBlur"
       :type="type"
-      :placeholder="placeholder"
-      :maxlength="maxlength"
-      :disabled="disabled"
-      :readonly="readonly">
-    <div v-if="showIcon" class="van-field__icon" @click="onIconClick">
+      :value="value"
+      @input="onInput"
+    />
+    <div
+      v-if="hasIcon"
+      v-show="$slots.icon || value"
+      class="van-field__icon"
+      @touchstart.prevent="onClickIcon"
+    >
       <slot name="icon">
-        <van-icon :name="icon"></van-icon>
+        <van-icon :name="icon" />
       </slot>
     </div>
   </van-cell>
@@ -70,80 +66,52 @@ export default {
     value: {},
     icon: String,
     label: String,
-    placeholder: String,
     error: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
     required: Boolean,
-    maxlength: [String, Number],
     border: Boolean,
-    rows: [String, Number],
-    cols: [String, Number],
-    autosize: {
-      type: Boolean,
-      default: false
-    },
+    autosize: Boolean,
     onIconClick: {
       type: Function,
       default: () => {}
     }
   },
 
-  data() {
-    return {
-      currentValue: this.value
-    };
+  watch: {
+    value() {
+      if (this.autosize && this.type === 'textarea') {
+        this.$nextTick(this.adjustSize);
+      }
+    }
   },
 
   mounted() {
     if (this.autosize && this.type === 'textarea') {
-      const el = this.$refs.textareaElement;
+      const el = this.$refs.textarea;
       el.style.height = el.scrollHeight + 'px';
       el.style.overflowY = 'hidden';
     }
   },
 
-  watch: {
-    value(val) {
-      this.currentValue = val;
-    },
-
-    currentValue(val) {
-      if (this.autosize && this.type === 'textarea') {
-        this.$nextTick(this.sizeAdjust);
-      }
-      this.$emit('input', val);
-    }
-  },
-
   computed: {
-    showIcon() {
-      // 有icon的slot，就认为一直展示
-      if (this.$slots.icon) {
-        return true;
-      }
-
-      return this.icon && this.currentValue;
+    hasIcon() {
+      return this.$slots.icon || this.icon;
     }
   },
 
   methods: {
-    handleInput(event) {
-      this.currentValue = event.target.value;
+    onInput(event) {
+      this.$emit('input', event.target.value);
     },
 
-    sizeAdjust() {
-      const el = this.$refs.textareaElement;
+    onClickIcon() {
+      this.$emit('click-icon');
+      this.onIconClick();
+    },
+
+    adjustSize() {
+      const el = this.$refs.textarea;
       el.style.height = 'auto';
       el.style.height = el.scrollHeight + 'px';
-    },
-
-    handleInputFocus() {
-      this.$emit('focus');
-    },
-
-    handleInputBlur() {
-      this.$emit('blur');
     }
   }
 };
diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css
index 6d179f155..909aaaf08 100644
--- a/packages/vant-css/src/field.css
+++ b/packages/vant-css/src/field.css
@@ -22,7 +22,7 @@
     padding-left: 90px;
   }
 
-  &--hastextarea {
+  &--has-textarea {
     .van-field__control {
       min-height: 60px;
     }
diff --git a/test/unit/specs/field.spec.js b/test/unit/specs/field.spec.js
index 9b38bf891..5da380573 100644
--- a/test/unit/specs/field.spec.js
+++ b/test/unit/specs/field.spec.js
@@ -38,16 +38,12 @@ describe('Field', () => {
       }
     });
 
-    expect(wrapper.hasClass('van-field')).to.be.true;
-    expect(wrapper.data().currentValue).to.equal('test');
-
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     wrapper.vm.value = 'test2';
-    wrapper.update();
     wrapper.vm.$nextTick(() => {
-      expect(wrapper.data().currentValue).to.equal('test2');
       expect(eventStub.calledWith('input'));
+      expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test2');
       done();
     });
   });
@@ -70,25 +66,6 @@ describe('Field', () => {
     });
   });
 
-  it('input something to field', (done) => {
-    wrapper = mount(Field, {
-      propsData: {
-        value: ''
-      }
-    });
-
-    const input = wrapper.find('.van-field__control')[0];
-
-    input.element.value = 'test';
-    input.trigger('input');
-
-    wrapper.update();
-    wrapper.vm.$nextTick(() => {
-      expect(wrapper.data().currentValue).to.equal('test');
-      done();
-    });
-  });
-
   it('create a textarea field', () => {
     wrapper = mount(Field, {
       propsData: {
@@ -98,7 +75,7 @@ describe('Field', () => {
     });
 
     expect(wrapper.hasClass('van-field')).to.be.true;
-    expect(wrapper.hasClass('van-field--hastextarea')).to.be.true;
+    expect(wrapper.hasClass('van-field--has-textarea')).to.be.true;
   });
 
   it('create a autosize textarea field', (done) => {
@@ -109,6 +86,10 @@ describe('Field', () => {
       }
     });
 
+    wrapper.vm.$on('input', val => {
+      wrapper.vm.value = val;
+    });
+
     expect(wrapper.hasClass('van-field')).to.be.true;
     expect(wrapper.hasClass('van-field--autosize')).to.be.true;
 
@@ -122,7 +103,7 @@ describe('Field', () => {
 
     wrapper.update();
     setTimeout(() => {
-      expect(wrapper.data().currentValue).to.equal('test');
+      expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test');
       expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
       done();
     }, 500);
@@ -136,6 +117,7 @@ describe('Field', () => {
       }
     });
 
+    wrapper.find('.van-field__icon')[0].trigger('touchstart');
     expect(wrapper.find('.van-field__icon').length).to.equal(1);
   });
 
@@ -148,7 +130,7 @@ describe('Field', () => {
       }
     });
 
-    wrapper.find('.van-field__icon')[0].trigger('click');
+    wrapper.find('.van-field__icon')[0].trigger('touchstart');
     expect(fn.calledOnce).to.be.true;
   });
 
diff --git a/yarn.lock b/yarn.lock
index b7835ddc1..239a9615c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7660,8 +7660,8 @@ yeast@0.1.2:
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
 zan-doc@^0.2.12:
-  version "0.2.15"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.15.tgz#f169ce77fce1323e257f7b5c674fc56092bf83ec"
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.16.tgz#dd458f0a807dea814b412a609679a63a20960077"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"