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 |