diff --git a/packages/vant/src/signature/README.md b/packages/vant/src/signature/README.md index c09beb891..25247ddd0 100644 --- a/packages/vant/src/signature/README.md +++ b/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 - + ``` ```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; - demoUrl.value = filePath; - - console.log('submit', canvas, filePath); + image.value = data.image; }; - - const onClear = () => console.log('clear'); + const onClear = () => showToast('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 ``` ### LineWidth +Use `line-width` prop to set the width of the line. + ```html ``` @@ -79,11 +84,11 @@ export default { | Event Name | Description | Callback Parameters | | --- | --- | --- | -| start | Callback for start of signature | - | -| end | Callback for end of signature | - | -| signing | Callback for signature in progress | _event: TouchEvent_ | -| submit | submit button click | _data: {canvas: HTMLCanvasElement, filePath: string}_ | -| clear | clear button click | - | +| start | Emitted when signing starts | - | +| end | Emitted when signing ends | - | +| signing | Emitted when signing | _event: TouchEvent_ | +| submit | Emitted when clicking the confirm button | _data: { image: string; canvas: HTMLCanvasElement }_ | +| clear | Emitted when clicking the cancel button | - | ### Types diff --git a/packages/vant/src/signature/README.zh-CN.md b/packages/vant/src/signature/README.zh-CN.md index 3a7529549..93f861f16 100644 --- a/packages/vant/src/signature/README.zh-CN.md +++ b/packages/vant/src/signature/README.zh-CN.md @@ -20,31 +20,32 @@ app.use(Signature); ### 基础用法 +当点击确认按钮时，组件会触发 `submit` 事件，事件的第一个参数为 `data`，包含以下字段： + +- `image`：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。 +- `canvas`：Canvas 元素。 + ```html - + ``` ```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; - demoUrl.value = filePath; - - console.log('submit', canvas, filePath); + image.value = data.image; }; - - const onClear = () => console.log('clear'); + const onClear = () => showToast('clear'); return { + image, onSubmit, onClear, - demoUrl, }; }, }; @@ -52,12 +53,16 @@ export default { ### 自定义颜色 +通过 `pen-color` 来自定义笔触颜色。 + ```html ``` ### 自定义线宽 +通过 `line-width` 来自定义线条宽度。 + ```html ``` @@ -79,11 +84,11 @@ export default { | 事件名 | 说明 | 回调参数 | | --- | --- | --- | -| start | 签名开始事件回调 | - | -| end | 签名结束事件回调 | - | -| signing | 签名过程事件回调 | _event: TouchEvent_ | -| submit | 确定按钮事件回调 | _data: {canvas: HTMLCanvasElement, filePath: string}_ | -| clear | 取消按钮事件回调 | - | +| start | 开始签名时触发 | - | +| end | 结束签名时触发 | - | +| signing | 签名过程中触发 | _event: TouchEvent_ | +| submit | 点击确定按钮时触发 | _data: { image: string; canvas: HTMLCanvasElement }_ | +| clear | 点击取消按钮时触发 | - | ### 类型定义 diff --git a/packages/vant/src/signature/Signature.tsx b/packages/vant/src/signature/Signature.tsx index 9cebcad5d..e641b4356 100644 --- a/packages/vant/src/signature/Signature.tsx +++ b/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, - filePath, + image, + canvas, }); }; diff --git a/packages/vant/src/signature/demo/index.vue b/packages/vant/src/signature/demo/index.vue index 3e3caf238..3c38b4ebb 100644 --- a/packages/vant/src/signature/demo/index.vue +++ b/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 = filePath; - - console.log('submit', canvas, filePath); + demoUrl.value = data.image; }; -const onStart = () => console.log('start'); -const onClear = () => console.log('clear'); -const onEnd = () => console.log('end'); -const onSigning = (e) => console.log('signing', e); +const onClear = () => showToast('clear'); diff --git a/packages/vant/src/signature/test/index.spec.ts b/packages/vant/src/signature/test/index.spec.ts index a7cc20709..5c7b73bcf 100644 --- a/packages/vant/src/signature/test/index.spec.ts +++ b/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 () => {