一个简易签名组件，基于vue3和canvas。
#安装
npm i @sangtian152/vue3-sign -S # or yarn add @sangtian152/vue3-sign
引入
在 main.js 中写入以下内容：
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')
基础示例
<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 | 完成签名 | — |