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

---

Stroke Width (Range Slider)

Use TSlider range mode to control both min and max line width simultaneously.

<TSlider v-model="range" :min="0.5" :max="10" :step="0.5" range />
<TSignaturePad :min-width="range[0]" :max-width="range[1]" />

---

Undo / Redo

Call undo() / redo() methods via ref to revert or reapply strokes. Use hasUndo / hasRedo to control button disabled state.

<TSignaturePad ref="padRef">
  <template #footer>
    <button :disabled="!padRef?.hasUndo" @click="padRef?.undo()">Undo</button>
    <button :disabled="!padRef?.hasRedo" @click="padRef?.redo()">Redo</button>
    <button @click="padRef?.clear()">Clear</button>
  </template>
</TSignaturePad>

---

Custom Layout

Use :layout prop to control the action buttons in the footer. Default is ['ok','res'] (confirm + reset). Optional: 'undo', 'redo', 'width' (stroke width slider).

<TSignaturePad :layout="['ok','res','undo','redo','width']" />

---

Save Format

Use save-format prop to control the output image format: 'png' (default), 'jpeg', or 'svg'.

<TSignaturePad save-format="svg" @confirm="handleConfirm" />

---

Custom Footer Slot

Use #footer slot to customize the action button area. Combine with exposed methods (clear, undo, redo) and emits (@confirm, @end-stroke) for complete custom interaction.

<TSignaturePad ref="padRef" @confirm="onConfirm">
  <template #footer>
    <TSlider v-model="range" :min="0.5" :max="6" :step="0.5" range />
    <button @click="padRef?.undo()">Undo</button>
    <button @click="padRef?.clear()">Resign</button>
  </template>
</TSignaturePad>

---

API

Props

Prop	Type	Default	Description
model-value / v-model	string	''	Signature DataURL
width	number | string	'100%'	Canvas width (number for px, string for CSS value like '100%')
height	number | string	200	Canvas height (number for px, string for CSS value)
pen-color	string	'#000000'	Pen color
background-color	string	'rgba(0,0,0,0)'	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
save-format	'png' | 'jpeg' | 'svg'	'png'	Output image format on confirm
confirm-text	string	'确认'	Confirm button text
layout	('ok'|'res'|'undo'|'redo'|'width')[]	['ok','res']	Footer layout items

Emits

Event	Parameters	Description
update:model-value	dataURL: string | null	v-model update
confirm	dataURL: string	Signature confirmed
clear	—	Signature cleared
end-stroke	isEmpty: boolean	Fires after each stroke ends

Expose

Method	Description
isEmpty()	Whether signature is empty
toDataURL(type?, encoderOptions?)	Get signature DataURL
toSVG()	Get signature as SVG string
fromDataURL(dataURL)	Load signature from DataURL
clear()	Clear signature
undo()	Undo last stroke
redo()	Redo undone stroke
hasUndo	Whether undo is available (reactive ref)
hasRedo	Whether redo is available (reactive ref)

Slots

Slot	Description
footer	Custom action buttons area