chore(Signature): rename filePath param to image (#11806)

packages/vant/src/signature/README.md

@@ -20,31 +20,32 @@ app.use(Signature);
 
 ### Basic Usage
 
+When the confirm button is clicked, the component will emit the `submit` event. The first parameter of the event is `data`, which contains the following fields:
+
+- `image`: The image corresponding to the signature, which is in base64 string format. Returns an empty string if the signature is empty.
+- `canvas`: The Canvas element.
+
 ```html
 <van-signature @submit="onSubmit" @clear="onClear" />
-<van-image v-if="demoUrl" :src="demoUrl" />
+<van-image v-if="image" :src="image" />
 ```
 
 ```js
 import { ref } from 'vue';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const demoUrl = ref('');
+    const image = ref('');
-
     const onSubmit = (data) => {
-      const { filePath, canvas } = data;
+      image.value = data.image;
-      demoUrl.value = filePath;
-
-      console.log('submit', canvas, filePath);
     };
-
+    const onClear = () => showToast('clear');
-    const onClear = () => console.log('clear');
 
     return {
+      image,
       onSubmit,
       onClear,
-      demoUrl,
     };
   },
 };
@@ -52,12 +53,16 @@ export default {
 
 ### Pen Color
 
+Use `pen-color` prop to set the color of the brush stroke.
+
 ```html
 <van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />
 ```
 
 ### LineWidth
 
+Use `line-width` prop to set the width of the line.
+
 ```html
 <van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
 ```
@@ -79,11 +84,11 @@ export default {
 
 | Event Name | Description | Callback Parameters |
 | --- | --- | --- |
-| start | Callback for start of signature | - |
+| start | Emitted when signing starts | - |
-| end | Callback for end of signature | - |
+| end | Emitted when signing ends | - |
-| signing | Callback for signature in progress | _event: TouchEvent_ |
+| signing | Emitted when signing | _event: TouchEvent_ |
-| submit | submit button click | _data: {canvas: HTMLCanvasElement, filePath: string}_ |
+| submit | Emitted when clicking the confirm button | _data: { image: string; canvas: HTMLCanvasElement }_ |
-| clear | clear button click | - |
+| clear | Emitted when clicking the cancel button | - |
 
 ### Types
 

packages/vant/src/signature/README.zh-CN.md

@@ -20,31 +20,32 @@ app.use(Signature);
 
 ### 基础用法
 
+当点击确认按钮时，组件会触发 `submit` 事件，事件的第一个参数为 `data`，包含以下字段：
+
+- `image`：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。
+- `canvas`：Canvas 元素。
+
 ```html
 <van-signature @submit="onSubmit" @clear="onClear" />
-<van-image v-if="demoUrl" :src="demoUrl" />
+<van-image v-if="image" :src="image" />
 ```
 
 ```js
 import { ref } from 'vue';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const demoUrl = ref('');
+    const image = ref('');
-
     const onSubmit = (data) => {
-      const { filePath, canvas } = data;
+      image.value = data.image;
-      demoUrl.value = filePath;
-
-      console.log('submit', canvas, filePath);
     };
-
+    const onClear = () => showToast('clear');
-    const onClear = () => console.log('clear');
 
     return {
+      image,
       onSubmit,
       onClear,
-      demoUrl,
     };
   },
 };
@@ -52,12 +53,16 @@ export default {
 
 ### 自定义颜色
 
+通过 `pen-color` 来自定义笔触颜色。
+
 ```html
 <van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />
 ```
 
 ### 自定义线宽
 
+通过 `line-width` 来自定义线条宽度。
+
 ```html
 <van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />
 ```
@@ -79,11 +84,11 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
-| start | 签名开始事件回调 | - |
+| start | 开始签名时触发 | - |
-| end | 签名结束事件回调 | - |
+| end | 结束签名时触发 | - |
-| signing | 签名过程事件回调 | _event: TouchEvent_ |
+| signing | 签名过程中触发 | _event: TouchEvent_ |
-| submit | 确定按钮事件回调 | _data: {canvas: HTMLCanvasElement, filePath: string}_ |
+| submit | 点击确定按钮时触发 | _data: { image: string; canvas: HTMLCanvasElement }_ |
-| clear | 取消按钮事件回调 | - |
+| clear | 点击取消按钮时触发 | - |
 
 ### 类型定义
 

packages/vant/src/signature/Signature.tsx

@@ -104,7 +104,7 @@ export default defineComponent({
       }
 
       const isEmpty = isCanvasEmpty(canvas);
-      const filePath = isEmpty
+      const image = isEmpty
         ? ''
         : canvas.toDataURL(
             `image/${props.type}`,
@@ -112,8 +112,8 @@ export default defineComponent({
           );
 
       emit('submit', {
-        canvas: isEmpty ? null : canvas,
+        image,
-        filePath,
+        canvas,
       });
     };
 

packages/vant/src/signature/demo/index.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import VanSignature from '..';
 import VanImage from '../../image';
 import { useTranslate } from '../../../docs/site';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -20,50 +21,24 @@ const t = useTranslate({
 const demoUrl = ref('');
 
 const onSubmit = (data) => {
-  const { filePath, canvas } = data;
+  demoUrl.value = data.image;
-  demoUrl.value = filePath;
-
-  console.log('submit', canvas, filePath);
 };
 
-const onStart = () => console.log('start');
+const onClear = () => showToast('clear');
-const onClear = () => console.log('clear');
-const onEnd = () => console.log('end');
-const onSigning = (e) => console.log('signing', e);
 </script>
 
 <template>
   <demo-block :title="t('basic')">
-    <van-signature
+    <van-signature @submit="onSubmit" @clear="onClear" />
-      @submit="onSubmit"
-      @clear="onClear"
-      @start="onStart"
-      @end="onEnd"
-      @signing="onSigning"
-    />
   </demo-block>
 
   <van-image v-if="demoUrl" :src="demoUrl" />
 
   <demo-block :title="t('penColor')">
-    <van-signature
+    <van-signature pen-color="#ff0000" @clear="onClear" @submit="onSubmit" />
-      pen-color="#ff0000"
-      @clear="onClear"
-      @submit="onSubmit"
-      @start="onStart"
-      @end="onEnd"
-      @signing="onSigning"
-    />
   </demo-block>
 
   <demo-block :title="t('lineWidth')">
-    <van-signature
+    <van-signature :line-width="6" @clear="onClear" @submit="onSubmit" />
-      :line-width="6"
-      @clear="onClear"
-      @submit="onSubmit"
-      @start="onStart"
-      @end="onEnd"
-      @signing="onSigning"
-    />
   </demo-block>
 </template>

packages/vant/src/signature/test/index.spec.ts

@@ -47,16 +47,16 @@ test('submit() should output a valid canvas', async () => {
 
   await wrapper.vm.$nextTick();
 
-  wrapper.vm.$emit('submit', { canvas: null, filePath: '' });
+  wrapper.vm.$emit('submit', { canvas: null, image: '' });
 
   const emitted = wrapper.emitted();
   expect(emitted.submit).toBeTruthy();
   const [data] = emitted.submit[0] as [
-    { canvas: HTMLCanvasElement | null; filePath: string }
+    { canvas: HTMLCanvasElement | null; image: string }
   ];
 
   expect(data.canvas).toBeNull();
-  expect(data.filePath).toBe('');
+  expect(data.image).toBe('');
 });
 
 test('should render tips correctly', async () => {