feat(field): add prop extra-event-params support (#5184)

* feat(field): add prop extra support

* feat(field): adjust extra params to extra-to-params

packages/field/README.md

@@ -258,13 +258,14 @@ Page({
 | cursor | 指定 focus 时的光标位置 | _number_ | `-1` |
 | clear-trigger `v1.8.4` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
 | always-embed `v1.9.2` | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | _boolean_ | `false` |
+| extra-event-params `v1.10.12` | 开启事件增强模式，会在 input 和 change 事件额外提供 `cursor` 和 `keyCode` 参数，计划在下一个大版本作为默认行为 | _boolean_ | `false` |
 
 ### Events
 
 | 事件 | 说明 | 回调参数 |
 | --- | --- | --- |
-| bind:input | 输入内容时触发 | event.detail: 当前输入值 |
+| bind:input | 输入内容时触发 | event.detail: 当前输入值; 在 extra-event-params 为 `true` 时, event.detail.value: 当前输入值, event.detail.cursor: 光标位置, event.detail.keyCode: 键值 |
-| bind:change | 输入内容时触发 | event.detail: 当前输入值 |
+| bind:change | 输入内容时触发 | event.detail: 当前输入值; 在 extra-event-params 为 `true` 时, event.detail.value: 当前输入值, event.detail.cursor: 光标位置, event.detail.keyCode: 键值 |
 | bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 |
 | bind:click-icon | 点击尾部图标时触发 | - |
 | bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 |

packages/field/index.ts

@@ -1,6 +1,7 @@
 import { nextTick } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { commonProps, inputProps, textareaProps } from './props';
+import { InputDetails } from './types';
 
 VantComponent({
   field: true,
@@ -53,6 +54,10 @@ VantComponent({
       type: String,
       value: 'clear',
     },
+    extraEventParams: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   data: {
@@ -72,7 +77,8 @@ VantComponent({
 
       this.value = value;
       this.setShowClear();
-      this.emitChange();
+
+      this.emitChange(event.detail);
     },
 
     onFocus(
@@ -105,7 +111,7 @@ VantComponent({
       this.setShowClear();
 
       nextTick(() => {
-        this.emitChange();
+        this.emitChange({ value: '' });
         this.$emit('clear', '');
       });
     },
@@ -119,7 +125,7 @@ VantComponent({
       this.$emit('confirm', value);
     },
 
-    setValue(value) {
+    setValue(value: string) {
       this.value = value;
       this.setShowClear();
 
@@ -127,7 +133,7 @@ VantComponent({
         this.setData({ innerValue: '' });
       }
 
-      this.emitChange();
+      this.emitChange({ value });
     },
 
     onLineChange(event: WechatMiniprogram.TextareaLineChange) {
@@ -142,12 +148,16 @@ VantComponent({
       this.$emit('keyboardheightchange', event.detail);
     },
 
-    emitChange() {
+    emitChange(detail: InputDetails) {
-      this.setData({ value: this.value });
+      const { extraEventParams } = this.data;
+
+      this.setData({ value: detail.value });
 
       nextTick(() => {
-        this.$emit('input', this.value);
+        const data = extraEventParams ? detail : detail.value;
-        this.$emit('change', this.value);
+
+        this.$emit('input', data);
+        this.$emit('change', data);
       });
     },
 

packages/field/types.ts

@@ -0,0 +1,8 @@
+export interface InputDetails {
+  /** 输入框内容 */
+  value: string;
+  /** 光标位置 */
+  cursor?: number;
+  /** keyCode 为键值 (目前工具还不支持返回keyCode参数) `2.1.0` 起支持 */
+  keyCode?: number;
+}