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	完成签名	—