[Improvement] Field: add confirm type

packages/field/README.md

@@ -142,6 +142,7 @@
 | autosize | 自适应内容高度，只对 textarea 有效 | `Boolean` | `false` |
 | icon | 输入框尾部图标 (可选值见 Icon 组件)  | `String` | - |
 | left-icon | 输入框左侧图标 (可选值见 Icon 组件)  | `String` | - |
+| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | `String` | `done` |
 | cursor-spacing | 输入框聚焦时底部与键盘的距离 | `Number` | `50` |
 | use-button-slot | 是否使用 button slot  | `Boolean` | `false` |
 
@@ -149,8 +150,9 @@
 
 | 事件 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
-| inout | 输入内容时触发 | value: 当前输入值 |
+| input | 输入内容时触发 | value: 当前输入值 |
 | change | 输入内容时触发 | value: 当前输入值 |
+| confirm | 点击完成按钮时触发 | value: 当前输入值 |
 | tap-icon | 点击尾部图标时触发 | - |
 | focus | 输入框聚焦时触发 | - |
 | blur | 输入框失焦时触发 | - |

packages/field/index.js

@@ -2,7 +2,6 @@ Component({
   behaviors: ['wx://form-field'],
 
   externalClasses: [
-    'custom-class',
     'input-class'
   ],
 
@@ -26,8 +25,11 @@ Component({
     clearable: Boolean,
     labelAlign: String,
     inputAlign: String,
+    customClass: String,
+    confirmType: String,
     errorMessage: String,
     placeholder: String,
+    customStyle: String,
     useButtonSlot: Boolean,
     placeholderClass: String,
     cursorSpacing: {
@@ -40,15 +42,15 @@ Component({
     },
     value: {
       type: null,
-      value: ''
+      value: '',
-    },
-    type: {
-      type: String,
-      value: 'text',
       observer(currentValue) {
         this.setData({ currentValue });
       }
     },
+    type: {
+      type: String,
+      value: 'text'
+    },
     border: {
       type: Boolean,
       value: true
@@ -113,6 +115,12 @@ Component({
         currentValue: '',
         showClear: this.getShowClear({ value: '' })
       });
+      this.triggerEvent('input', '');
+      this.triggerEvent('change', '');
+    },
+
+    onConfirm() {
+      this.triggerEvent('confirm', this.data.currentValue);
     }
   }
 });

packages/field/index.wxml

@@ -5,8 +5,9 @@
   border="{{ border }}"
   is-link="{{ isLink }}"
   required="{{ required }}"
+  custom-style="{{ customStyle }}"
   title-width="90px"
-  custom-class="custom-class van-field {{ labelAlign ? 'van-field--label-' + labelAlign : '' }}"
+  custom-class="{{ customClass }} van-field {{ labelAlign ? 'van-field--label-' + labelAlign : '' }}"
 >
   <slot name="label" slot="title" />
   <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
@@ -23,8 +24,9 @@
       placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
       cursor-spacing="{{ cursorSpacing }}"
       bindinput="onInput"
-      bind:focus="onFocus"
       bind:blur="onBlur"
+      bind:focus="onFocus"
+      bind:confirm="onConfirm"
     />
     <input
       wx:else
@@ -37,10 +39,12 @@
       maxlength="{{ maxlength }}"
       placeholder="{{ placeholder }}"
       placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
+      confirm-type="{{ confirmType }}"
       cursor-spacing="{{ cursorSpacing }}"
       bindinput="onInput"
-      bind:focus="onFocus"
       bind:blur="onBlur"
+      bind:focus="onFocus"
+      bind:confirm="onConfirm"
     />
     <van-icon
       wx:if="{{ showClear }}"
@@ -51,8 +55,8 @@
     <view class="van-field__icon-container" bind:tap="onTapIcon">
       <van-icon
         wx:if="{{ icon }}"
-        custom-class="van-field__icon {{ iconClass }}"
         name="{{ icon }}"
+        custom-class="van-field__icon {{ iconClass }}"
       />
       <slot wx:else name="icon" />
     </view>