SignaturePad

Canvas-based signature pad component wrapping the signature_pad library. Supports v-model binding, clear, and confirm operations.

---

Basic Usage

Draw a signature on the panel and click confirm to get the Base64 DataURL.

<TSignaturePad v-model="signature" />

---

Custom Colors & Size

Customize pen color and canvas dimensions via pen-color, :width, and :height.

<TSignaturePad pen-color="#0ca678" :width="300" :height="150" />
<TSignaturePad pen-color="#d63939" :width="300" :height="150" />

---

Disabled State

Set disabled to prevent drawing, useful for viewing signed signatures.

<TSignaturePad disabled />

---

API

Props

Prop	Type	Default	Description
model-value / v-model	string	''	Signature DataURL
width	number	400	Canvas width
height	number	200	Canvas height
pen-color	string	'#000000'	Pen color
background-color	string	'#ffffff'	Background color
min-width	number	0.5	Minimum line width
max-width	number	2.5	Maximum line width
throttle	number	16	Throttle interval (ms)
disabled	boolean	false	Disable drawing
clear-text	string	'Clear'	Clear button text
confirm-text	string	'Confirm'	Confirm button text

Emits

Event	Parameters	Description
update:model-value	dataURL: string | null	v-model update
confirm	dataURL: string	Signature confirmed
clear	—	Signature cleared

Expose

Method	Description
isEmpty()	Whether signature is empty
toDataURL(type?, encoderOptions?)	Get signature DataURL
fromDataURL(dataURL)	Load signature from DataURL
clear()	Clear signature

Slots

Slot	Description
footer	Custom action buttons area