feat(AddressEdit): add change event for name and tel input (#12310)

* feat(AddressEdit): add change event for name and tel input

* feat(AddressEdit): add change event for name and tel input

packages/vant/src/address-edit/AddressEdit.tsx

@@ -95,6 +95,7 @@ export default defineComponent({
   emits: [
     'save',
     'focus',
+    'change',
     'delete',
     'clickArea',
     'changeArea',
@@ -136,6 +137,10 @@ export default defineComponent({
       emit('focus', key);
     };
 
+    const onChange = (key: string, value: string) => {
+      emit('change', { key, value });
+    };
+
     const rules = computed<Record<string, FieldRule[]>>(() => {
       const { validator, telValidator } = props;
 
@@ -273,6 +278,7 @@ export default defineComponent({
               rules={rules.value.name}
               placeholder={t('name')}
               onFocus={() => onFocus('name')}
+              onUpdate:modelValue={(val) => onChange('name', val)}
             />
             <Field
               v-model={data.tel}
@@ -283,6 +289,7 @@ export default defineComponent({
               maxlength={props.telMaxlength}
               placeholder={t('tel')}
               onFocus={() => onFocus('tel')}
+              onUpdate:modelValue={(val) => onChange('tel', val)}
             />
             <Field
               v-show={props.showArea}

packages/vant/src/address-edit/README.md

@@ -101,6 +101,7 @@ export default {
 | --- | --- | --- |
 | save | Emitted when the save button is clicked | _info: AddressEditInfo_ |
 | focus | Emitted when field is focused | _key: string_ |
+| change | Emitted when only the name and tel field are changed | _{key: string, value: string}_ |
 | delete | Emitted when confirming delete | _info: AddressEditInfo_ |
 | select-search | Emitted when a search result is selected | _value: string_ |
 | click-area | Emitted when the area field is clicked | - |

packages/vant/src/address-edit/README.zh-CN.md

@@ -101,6 +101,7 @@ export default {
 | --- | --- | --- |
 | save | 点击保存按钮时触发 | _info: AddressEditInfo_ |
 | focus | 输入框聚焦时触发 | _key: string_ |
+| change | 仅 `name` 和 `tel` 输入框值改变触发 | _{key: string, value: string}_ |
 | delete | 确认删除地址时触发 | _info: AddressEditInfo_ |
 | select-search | 选中搜索结果时触发 | _value: string_ |
 | click-area | 点击收件地区时触发 | - |

packages/vant/src/address-edit/test/index.spec.ts

@@ -109,6 +109,24 @@ test('should emit changeDetail event after changing address detail', () => {
   expect(wrapper.emitted('changeDetail')).toEqual([['123']]);
 });
 
+test('should emit change event after name or tel input', () => {
+  const wrapper = mount(AddressEdit);
+
+  const field = wrapper.findAll('.van-field__control')[0];
+  (field.element as HTMLInputElement).value = '123';
+  field.trigger('input');
+  expect(wrapper.emitted('change')?.[0]).toEqual([
+    { key: 'name', value: '123' },
+  ]);
+
+  const field1 = wrapper.findAll('.van-field__control')[1];
+  (field1.element as HTMLInputElement).value = '123';
+  field1.trigger('input');
+  expect(wrapper.emitted('change')?.[1]).toEqual([
+    { key: 'tel', value: '123' },
+  ]);
+});
+
 test('should show search result after focusing to address detail', async () => {
   const wrapper = mount(AddressEdit, {
     props: {