fix(Signature): fix checking if canvas is empty when backgoundColor is set (#12304)

* fix(Signature): fix checking if canvas is empty when set background color

* fix(Signature): delete console and uncomment code

* chore(Signature): reuse setCanvasBgColor function

---------

Co-authored-by: Junyu Zhou <junyu@vivino.cn.com>

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: {

packages/vant/src/signature/Signature.tsx

@@ -97,13 +97,19 @@ export default defineComponent({
       const empty = document.createElement('canvas');
       empty.width = canvas.width;
       empty.height = canvas.height;
+      if (props.backgroundColor) {
+        const emptyCtx = empty.getContext('2d');
+        setCanvasBgColor(emptyCtx);
+      }
       return canvas.toDataURL() === empty.toDataURL();
     };
 
-    const setCanvasBgColor = () => {
-      if (state.ctx && props.backgroundColor) {
-        state.ctx.fillStyle = props.backgroundColor;
-        state.ctx.fillRect(0, 0, state.width, state.height);
+    const setCanvasBgColor = (
+      ctx: CanvasRenderingContext2D | null | undefined,
+    ) => {
+      if (ctx && props.backgroundColor) {
+        ctx.fillStyle = props.backgroundColor;
+        ctx.fillRect(0, 0, state.width, state.height);
       }
     };
 
@@ -134,7 +140,7 @@ export default defineComponent({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
-        setCanvasBgColor();
+        setCanvasBgColor(state.ctx);
       }
       emit('clear');
     };
@@ -147,7 +153,7 @@ export default defineComponent({
 
         // ensure canvas is rendered
         nextTick(() => {
-          setCanvasBgColor();
+          setCanvasBgColor(state.ctx);
         });
       }
     });