Skip to content
On this page

Signature Draw

Draw signature like using real pen

Usage

Simple Usage

signature-draw
preview
vue
<template>
  <p-signature-draw />
</template>

for Initial

signature-draw
preview
vue
<template>
  <p-signature-draw :width="230" />
</template>

Placeholder

signature-draw
preview
vue
<template>
  <p-signature-draw placeholder="Draw signature here" />
</template>

Color

Set pen color with prop color, default is #000000

signature-draw
preview
vue
<template>
  <p-signature-draw color="#73185E" />
</template>

Binding v-model

You can bind the result of drawing's image with v-model

signature-draw
preview

result

vue
<template>
  <p-signature-draw v-model="result" />
</template>

<script lang="ts" setup>
const result = ref<File>()
</script>

Encode to base64

By default, this component keep v-model value as File object. If you need base64-dataURI format, you can add modifier base64 to your v-model.

signature-draw
preview

result

Result Image
vue
<template>
  <p-signature-draw v-model.base64="result" />
</template>

<script lang="ts" setup>
const result = ref('')
</script>

API

Props

PropsTypeDefaultDescription
widthNumber430Canvas's width
heightNumber230Canvas's width
placeholderString-Canvas's placeholder
colorString#000000Pencil color
modelValueString-Result of draw image
resetLabelStringResetReset button's label
openDrawLabelStringClick to DrawStart draw button's label (in mobile-view)
closeDrawLabelStringSaveSave draw button's label (in mobile-view)

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
There no props here

Released under the MIT License.