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端
• 流畅准确：签名时流畅不卡顿，鼠标和手指所到之处便是笔迹所在之处

功能

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

整体

签名

保存为图片

安装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()