feat: add autosize option

docs/examples-docs/field.md

@@ -84,6 +84,19 @@ export default {
 ```
 :::
 
+
+### Autosize的输入框(仅支持textarea)
+
+传入`autosize`属性, 且将`rows`设为1。
+
+:::demo 错误的输入框
+```html
+<zan-cell-group>
+  <zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></zan-field>
+</zan-cell-group>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
@@ -96,4 +109,7 @@ export default {
 | 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 |
 

packages/field/src/field.vue

@@ -8,16 +8,20 @@
       'zan-field--nolabel': !label,
       'zan-field--disabled': disabled,
       'zan-field--error': error,
-      'zan-field--border': border
+      'zan-field--border': border,
+      'zan-field--autosize': autosize
     }">
     <textarea
       v-if="type === 'textarea'"
+      ref="textareaElement"
       class="zan-field__control"
       v-model="currentValue"
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
-      :readonly="readonly">
+      :readonly="readonly"
+      :rows="rows"
+      :cols="cols">
     </textarea>
     <input
       v-else
@@ -33,6 +37,7 @@
 </template>
 
 <script>
+const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime', 'password', 'textarea'];
 import zanCell from 'packages/cell';
 
 export default {
@@ -45,7 +50,10 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'text'
+      default: 'text',
+      validate(value) {
+        return VALID_TYPES.indexOf(value) > -1;
+      }
     },
     placeholder: String,
     value: {},
@@ -55,7 +63,16 @@ export default {
     readonly: Boolean,
     required: Boolean,
     maxlength: [String, Number],
-    border: Boolean
+    border: Boolean,
+    rows: [String, Number],
+    cols: [String, Number],
+    autosize: {
+      type: Boolean,
+      default: false,
+      validate(value) {
+        if (value && this.type !== 'textarea') return false;
+      }
+    }
   },
 
   data() {
@@ -70,6 +87,7 @@ export default {
     },
 
     currentValue(val) {
+      if (this.autosize && this.type === 'textarea') this.sizeAdjust();
       this.$emit('input', val);
     }
   },
@@ -77,6 +95,15 @@ export default {
   methods: {
     handleInput(event) {
       this.currentValue = event.target.value;
+    },
+
+    sizeAdjust() {
+      const textareaElement = this.$refs.textareaElement;
+      const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
+          parseInt(textareaElement.style.paddingTop, 10)) || 0;
+      // 需要先设为0， 才可以让scrollHeight正确计算。
+      textareaElement.style.height = 0 + 'px';
+      textareaElement.style.height = (textareaElement.scrollHeight - textAreaDiff) + 'px';
     }
   }
 };

packages/zanui-css/src/field.css

@@ -50,6 +50,12 @@
       }
     }
 
+    @m autosize {
+      .zan-field__control {
+        min-height: 0px;
+      }
+    }
+
     .zan-cell__title,
     .zan-cell__value {
       float: none;