[improvement] Field: optimize template (#560)

packages/col/index.js

@@ -12,6 +12,16 @@ create({
     offset: Number
   },
 
+  computed: {
+    classes() {
+      const { span, offset } = this.data;
+      return this.classNames('custom-class', 'van-col', {
+        [`van-col--${span}`]: span,
+        [`van-col--${offset}`]: offset
+      });
+    }
+  },
+
   methods: {
     setGutter(gutter) {
       const padding = `${gutter / 2}px`;

packages/col/index.wxml

@@ -1,5 +1,5 @@
 <view
-  class="custom-class van-col {{ span ? 'van-col--' + span : '' }} {{ offset ? 'van-col--offset-' + offset : '' }}"
+  class="{{ classes }}"
   style="{{ style }}"
 >
   <slot />

packages/field/README.md

@@ -152,7 +152,6 @@ Page({
 | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
 | error | 是否将输入内容标红 | `Boolean` | `false` |
 | error-message | 底部错误提示文案，为空时不展示 | `String` | `''` |
-| label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` |
 | autosize | 自适应内容高度，只对 textarea 有效 | `Boolean` | `false` |
 | icon | 输入框尾部图标 (可选值见 Icon 组件)  | `String` | - |
@@ -185,7 +184,6 @@ Page({
 
 | 类名 | 说明 |
 |-----------|-----------|
-| custom-class | 根节点样式类 |
 | input-class | 输入框样式类 |
 | icon-class | 右侧图标样式类 |
 | placeholder-class | 占位内容样式类 |

packages/field/index.js

@@ -19,7 +19,6 @@ create({
     required: Boolean,
     iconClass: String,
     clearable: Boolean,
-    labelAlign: String,
     inputAlign: String,
     customClass: String,
     confirmType: String,
@@ -60,6 +59,18 @@ create({
     showClear: false
   },
 
+  computed: {
+    inputClass() {
+      const { data } = this;
+      return this.classNames('input-class', 'van-field__input', {
+        'van-field--error': data.error,
+        'van-field__textarea': data.type === 'textarea',
+        'van-field__input--disabled': data.disabled,
+        [`van-field--${data.inputAlign}`]: data.inputAlign
+      });
+    }
+  },
+
   methods: {
     onInput(event) {
       const { value = '' } = event.detail || {};

packages/field/index.pcss

@@ -10,16 +10,18 @@
     }
   }
 
-  &__control {
+  &__input {
     border: 0;
     margin: 0;
     padding: 0;
     width: 100%;
+    height: 24px;
     resize: none;
     display: block;
     text-align: left;
-    box-sizing: border-box;
+    min-height: 24px;
     line-height: inherit;
+    box-sizing: border-box;
     background-color: transparent;
 
     &--disabled {
@@ -37,6 +39,10 @@
     }
   }
 
+  &__clear-root {
+    height: 24px;
+  }
+
   &__clear,
   &__icon-container,
   &__button {
@@ -78,18 +84,4 @@
   &--error {
     color: $red;
   }
-
-  &--label {
-    &-center {
-      .van-cell__title {
-        text-align: center;
-      }
-    }
-
-    &-right {
-      .van-cell__title {
-        text-align: right;
-      }
-    }
-  }
 }

packages/field/index.wxml

@@ -7,13 +7,13 @@
   required="{{ required }}"
   custom-style="{{ customStyle }}"
   title-width="{{ titleWidth }}"
-  custom-class="{{ customClass }} van-field {{ labelAlign ? 'van-field--label-' + labelAlign : '' }}"
+  custom-class="van-field"
 >
   <slot name="label" slot="title" />
   <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
     <textarea
       wx:if="{{ type === 'textarea' }}"
-      class="input-class van-field__control van-field__textarea {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
+      class="{{ inputClass }}"
       focus="{{ focus }}"
       value="{{ value }}"
       disabled="{{ disabled }}"
@@ -30,7 +30,7 @@
     />
     <input
       wx:else
-      class="input-class van-field__control {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
+      class="{{ inputClass }}"
       type="{{ type }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -49,6 +49,7 @@
     <van-icon
       wx:if="{{ showClear }}"
       name="clear"
+      class="van-field__clear-root"
       custom-class="van-field__clear"
       bind:touchstart="onClear"
     />