Signature Draw

Draw signature like using real pen

Usage

Simple Usage

preview

vue

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

for Initial

preview

vue

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

Placeholder

preview

vue

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

Color

Set pen color with prop color, default is #000000

preview

vue

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

Binding v-model

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

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.

preview

result

vue

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

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

API

Props

Props	Type	Default	Description
`width`	`Number`	`430`	Canvas's width
`height`	`Number`	`230`	Canvas's width
`placeholder`	`String`	`-`	Canvas's placeholder
`color`	`String`	`#000000`	Pencil color
`modelValue`	`String`	`-`	Result of draw image
`resetLabel`	`String`	`Reset`	Reset button's label
`openDrawLabel`	`String`	`Click to Draw`	Start draw button's label (in mobile-view)
`closeDrawLabel`	`String`	`Save`	Save draw button's label (in mobile-view)

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no props here

Signature Draw ​

Usage ​

Simple Usage ​

for Initial ​

Placeholder ​

Color ​

Binding v-model ​

Encode to base64 ​

API ​

Props ​

Slots ​

Events ​

Signature Draw

Usage

Simple Usage

for Initial

Placeholder

Color

Binding v-model

Encode to base64

API

Props

Slots

Events