Signature Text

Generate text to signature image

Usage

Simple Usage

preview

vue

<template>
  <p-signature-text text="Lorem Ipsum" />
</template>

for Initial

preview

vue

<template>
  <p-signature-text text="Lorem Ipsum" :width="230" :limit="1" />
</template>

Change Font

You can the font using prop font, it importing font from Google Font, default is Herr Von Muellerhoff

preview

vue

<template>
  <p-signature-text text="Lorem Ipsum" font="Herr Von Muellerhoff"/>
  <p-signature-text text="Lorem Ipsum" font="Satisfy"/>
</template>

Max Words

Limit the text word using maxwords, default is 2

preview

vue

<template>
  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="3" />
  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="2" />
  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="1" />
</template>

Max Length

Limit the text length using maxlength, default is 50

preview

vue

<template>
  <p-signature-text text="Lorem Aaaaaaaaaaaaaaaaaaaaaaaaaaaaa" maxlength="15" />
</template>

Color

preview

vue

<template>
  <p-signature-text text="Lorem ipsum" color="#004C9D" />
  <p-signature-text text="Lorem ipsum" color="#23B242" />
  <p-signature-text text="Lorem ipsum" color="#E42E2C" />
</template>

Binding v-model

You can bind the generated result with v-model.

preview

vue

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

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

result

Encode to base64

If you prefer base64-dataURI format, add modifier .base64 to your v-model.

preview

result

vue

<template>
  <p-signature-text text="Lorem ipsum" v-model.base64="result" />
</template>

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

API

Props

Props	Type	Default	Description
`width`	`Number`	`430`	Image's width
`height`	`Number`	`230`	Image's width
`text`	`String`	`-`	Image's text
`maxlimit`	`Number`	`2`	Maximal word to be generated
`maxlength`	`Number`	`50`	Maximal text length
`font`	`String`	`Herr Von Muellerhoff`	Text font, imported from Google Font
`color`	`String`	`#000000`	Text color
`modelValue`	`String`	`-`	Result of generated image

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no props here

Signature Text ​

Usage ​

Simple Usage ​

for Initial ​

Change Font ​

Max Words ​

Max Length ​

Color ​

Binding v-model ​

Encode to base64 ​

API ​

Props ​

Slots ​

Events ​

Signature Text

Usage

Simple Usage

for Initial

Change Font

Max Words

Max Length

Color

Binding v-model

Encode to base64

API

Props

Slots

Events