Signature - Vant 4

Signature

Intro

Component for signature scene, based on Canvas. Please upgrade vant to >= v4.3.0 before using this component.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Signature } from'vant'; const app = createApp(); app.use(Signature);

Usage

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.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const image = ref(''); constonSubmit = (data) => { image.value = data.image; }; constonClear = () => showToast('clear'); return { image, onSubmit, onClear, }; }, };

Pen Color

Use pen-color prop to set the color of the brush stroke.

Line Width

Use line-width prop to set the width of the line.

Background Color

Use background-color prop to set the color of the background.

API

Props

Parameter	Description	Type	Default
type	Export image type	string	png
pen-color	Color of the brush stroke, default is black	string	#000

| line-width | Width of the line | number | 3 | | background-color | Background color | string | - | | tips | Text that appears when Canvas is not supported | string | - | | clear-button-text | Clear button text | string | Clear | | confirm-button-text | Confirm button text | string | Confirm |

Events

Event Name	Description	Callback Parameters
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	-

Slots

Name	Description	SlotProps
tips	Custom tips	-

Methods

Use ref to get Signature instance and call instance methods.

Name	Description	Attribute	Return value
resize v4.7.3	Resize Signature when container element resized or visibility changed	-	-
clear v4.8.6	Can be called to clear the signature	-	-
submit v4.8.6	Trigger the submit event, which is equivalent to clicking the confirm button.	-	-

Types

The component exports the following type definitions:

importtype { SignatureProps, SignatureInstance } from'vant';

SignatureInstance is the type of component instance:

import { ref } from'vue'; importtype { SignatureInstance } from'vant'; const signatureRef = ref<SignatureInstance>(); signatureRef.value?.resize();

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-signature-padding	var(--van-padding-xs)	-
--van-signature-content-height	200px	Height of the canvas
--van-signature-content-background	var(--van-background-2)	Background color of the canvas
--van-signature-content-border	1px dotted #dadada	Border style of the canvas