Component for signature scene, based on Canvas. Please upgrade vant to >= v4.3.0 before using this component.
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Signature } from 'vant';\n\nconst app = createApp();\napp.use(Signature);\nWhen 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.<van-signature @submit="onSubmit" @clear="onClear" />\n<van-image v-if="image" :src="image" />\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const image = ref('');\n const onSubmit = (data) => {\n image.value = data.image;\n };\n const onClear = () => showToast('clear');\n\n return {\n image,\n onSubmit,\n onClear,\n };\n },\n};\nUse pen-color prop to set the color of the brush stroke.
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />\nUse line-width prop to set the width of the line.
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />\nUse background-color prop to set the color of the background.
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />\n| Parameter | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| type | \nExport image type | \nstring | \npng | \n
| pen-color | \nColor of the brush stroke, default is black | \nstring | \n#000 | \n
| line-width | \nWidth of the line | \nnumber | \n3 | \n
| background-color | \nBackground color | \nstring | \n- | \n
| tips | \nText that appears when Canvas is not supported | \nstring | \n- | \n
| clear-button-text | \nClear button text | \nstring | \nClear | \n
| confirm-button-text | \nConfirm button text | \nstring | \nConfirm | \n
| Event Name | \nDescription | \nCallback Parameters | \n
|---|---|---|
| start | \nEmitted when signing starts | \n- | \n
| end | \nEmitted when signing ends | \n- | \n
| signing | \nEmitted when signing | \nevent: TouchEvent | \n
| submit | \nEmitted when clicking the confirm button | \ndata: { image: string; canvas: HTMLCanvasElement } | \n
| clear | \nEmitted when clicking the cancel button | \n- | \n
Use ref to get Signature instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
resize v4.7.3 | \nResize Signature when container element resized or visibility changed | \n- | \n- | \n
clear v4.8.6 | \nCan be called to clear the signature | \n- | \n- | \n
submit v4.8.6 | \nTrigger the submit event, which is equivalent to clicking the confirm button. | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { SignatureProps, SignatureInstance } from 'vant';\nSignatureInstance is the type of component instance:
import { ref } from 'vue';\nimport type { SignatureInstance } from 'vant';\n\nconst signatureRef = ref<SignatureInstance>();\n\nsignatureRef.value?.resize();\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-signature-padding | \nvar(--van-padding-xs) | \n- | \n
| --van-signature-content-height | \n200px | \nHeight of the canvas | \n
| --van-signature-content-background | \nvar(--van-background-2) | \nBackground color of the canvas | \n
| --van-signature-content-border | \n1px dotted #dadada | \nBorder style of the canvas | \n