1.0.1 • Published 11 months ago

aiyingsitan-vue3-signature v1.0.1

Weekly downloads
-
License
-
Repository
-
Last release
11 months ago

aiyingsitan-vue3-signature 是一个基于 vue3 和 canvas 实现的签名工具

# 安装

npm i aiyingsitan-vue3-signature
# 引入

import AiyingsitanVue3Signature from 'aiyingsitan-vue3-signature'
import 'aiyingsitan-vue3-signature/lib/style.css'

const app = createApp(App)
app.use(AiyingsitanVue3Signature)
# 使用

<AiyingsitanVue3Signature></AiyingsitanVue3Signature>

特性

  • 兼容性强:适配移动端和PC端
  • 流畅准确:签名时流畅不卡顿,鼠标和手指所到之处便是笔迹所在之处

功能

  • 签名:像在本子上签名一样在屏幕上签名
  • 清空:清除画布上的签名
  • 橡皮:像橡皮擦一样擦除我们写错的签名
  • 保存:将签名保存为图片

整体

signature_01.png

签名

signature_02.png

保存为图片

signature_03.png

安装npm包体验更多......

属性

  • width(number):画布的宽度(默认 520)
  • height(number):画布的高度(默认 320)
  • background(string):画布的背景颜色(默认 #fff)
# 示例

<AiyingsitanVue3Signature :width="520" :height="320" background="#fff"></AiyingsitanVue3Signature>

事件

  • save:result(value: boolean):保存签名为照片时的结果
# 示例

<AiyingsitanVue3Signature @save:result="picSaveResult"></AiyingsitanVue3Signature>

const picSaveResult = (value: boolean) => {
  // 处理代码
}

方法

  • clear:清空画布(可在保存签名后调用)
# 示例

<AiyingsitanVue3Signature ref="signatureRef"></AiyingsitanVue3Signature>

signatureRef.value.clear()
1.0.1

11 months ago

1.0.0

11 months ago

0.0.4

11 months ago

0.0.2

11 months ago

0.0.1

11 months ago

1.0.7

11 months ago