vue3-sign 手写签名组件
一个简易签名组件,基于vue3和canvas。
#安装
1 2 3 | npm i @sangtian152 /vue3-sign -S # or yarn add @sangtian152 /vue3-sign |
引入
在 main.js 中写入以下内容:
1 2 3 4 5 6 7 8 | import { createApp } from 'vue' import vue3Sign from '@sangtian152/vue3-sign' ; import "@sangtian152/vue3-sign/lib/vue3-sign.css" ; const app = createApp(App) app.use(vue3Sign) app.mount( '#app' ) |
基础示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < template > < div > < Vue3Sign :canvas-width="700" :canvas-height="350" @on-done="done" /> </ div > </ template > < script > export default { name: "baseSign", setup() { const done = (img) => { console.log(img) } return { done } } }; </ script > |
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
line-color | 签名颜色 | String | — | #000000 |
line-width | 线条宽度 | Number | — | 3 |
canvas-width | 画布宽度 | Number | — | — |
canvas-height | 画布高度 | Number | — | — |
bg-color | 画布背景色 | String | — | #f7f7f7 |
img-bg-color | 生成图片背景色 | String | — | tranparent |
erasable | 是否启用橡皮擦 | Boolean | — | true |
eraser-radius | 橡皮擦半径 | Number | — | 6 |
crop | 是否裁剪图片 | Boolean | — | true |
footer | 是否显示底部 | Boolean | — | false |
before-done | 签名完成前调用,如果返回false会阻止默认签名完成事件 | Function | — | canvas |
#Events
事件名 | 说明 | 返回值 |
---|---|---|
orientationchange | 移动设备旋转事件 | orientation |
on-clear | 清空画布事件 | — |
on-done | 完成签名事件,返回签名生成的图片 | data:image/png;base64 |
#Methods
事件名 | 说明 | 返回值 |
---|---|---|
clear | 清空画布 | — |
done | 完成签名 | — |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!