Signature Signature

introduce

Components for signature scenarios.

Code Demo

Basic usage

When the confirm button is clicked, the component will trigger the submit event. The first parameter of the event is data, which contains the following fields:

image: The path of the image exported through canvas. This path of the applet is a temporary file path.
width: The width of the image.
height: the height of the image.
canvas: Canvas element.

<z-signature @submit="onSubmit" @clear="onClear" />
<z-image v-if="image" :width="width" :height="height" :src="image" />

import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const image = ref('')
const onSubmit = (data: any) => {
image.value = data.image
width.value = data.width
height.value = data.height
}
const onClear = () => toast.showToast('clear')

Custom color

Customize stroke color with pen-color.

<z-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />

Custom line width

Customize line width with line-width.

<z-signature :line-width="6" @submit="onSubmit" @clear="onClear" />

Custom background color

Customize the background color with background-color.

<z-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />

API

Props

Parameters	Description	Type	Default value
pen-color	Pen stroke color, default black	string	`#000`
line-width	line width	number	`3`
background-color	background color	string	-
clear-button-text	Clear button text	string	`clear`
confirm-button-text	Confirm button copy	string	`Confirm`

Events

Event name	Description	Callback parameters
start	Triggered when signing starts	-
end	Triggered when signing ends	-
signing	Triggered during the signing process	event: TouchEvent
submit	Triggered when the OK button is clicked	data: { image: string; canvas: HTMLCanvasElement }
clear	Triggered when the cancel button is clicked	-

method

Signature instances can be obtained through ref and instance methods can be called.

Method name	Description	Parameters	Return value
resize	This method can be called to trigger redrawing when the size of the outer element or the display state of the component changes	-	-

Theme customization

Style variables

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

Name	Default	Description
--z-signature-padding	var(--z-padding-xs)	-
--z-signature-content-height	400rpx	Canvas height
--z-signature-content-background	var(--z-background-2)	Canvas background color
--z-signature-content-border	2rpx dotted #dadada	Canvas border style