vue-perfect-signature

Practical Vue handwritten signature component.

实用的vue手写签名组件。

🔗 Curious? Try out a demo.

Installation

npm install vue-perfect-signature

Introduction

• Only supports mobile devices // 仅支持移动设备
• Even when the screen is locked, it is also forced to display horizontally. // 锁屏情况下，也强制横屏显示
• Prevent the vue-perfect-signature toolbar from safari and chrome. When the title bar slides, it will pull down to refresh the page. // 阻止在safari,chrome里在vue-perfect-signature工具栏，标题栏滑动会下拉刷新页面

Usage

install component

import VuePerfectSignature from "vue-perfect-signature";
import "vue-perfect-signature/lib/style.css";

const app = createApp(App);

app.use(VuePerfectSignature.install);

use vue-perfect-signature component

<template>
  <img
    :src="signatureImgSrc"
    alt="signature preview"
  />
  <Teleport v-if="isShow" to="body" >
    <vue-perfect-signature
      @save="handleSave"
      @close="isShow=false"
    />
  </Teleport>
</template>

<script>
export default {
  data() { return { isShow: true } }
  methods: {
    handleSave({ base64 }) {
      this.signatureImgSrc = base64
    }
  }
}
</script>

Example

demo.

Documentation

Attributes

Property	Type	Default	Description
drawOptions	Object		Depends on perfect-freehand, so refer to its options

Events

Property	Type	Default	Description
@save	({ base64 })=>void
@close	()=>void

Slots

Name	Type	Default	Description
topBar	({ base64 })=>void

Discussion

issues

License

• MIT

Author

• @haolins