Signature Signature


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" />



ParametersDescriptionTypeDefault value
pen-colorPen stroke color, default blackstring#000
line-widthline widthnumber3
background-colorbackground colorstring-
clear-button-textClear button textstringclear
confirm-button-textConfirm button copystringConfirm


Event nameDescriptionCallback parameters
startTriggered when signing starts-
endTriggered when signing ends-
signingTriggered during the signing processevent: TouchEvent
submitTriggered when the OK button is clickeddata: { image: string; canvas: HTMLCanvasElement }
clearTriggered when the cancel button is clicked-


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

Method nameDescriptionParametersReturn value
resizeThis 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.

--z-signature-content-height400rpxCanvas height
--z-signature-content-backgroundvar(--z-background-2)Canvas background color
--z-signature-content-border2rpx dotted #dadadaCanvas border style