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