Xs-Signature 是一个 Vue 在实现移动端实现手写签名的"最佳实践"，媲美原生 App 丝滑流畅的使用体验，上手即用。使用了最新的 Vue 技术栈，基于 Vue3、Vite5 实现。Tips：目前仅支持Vue3技术栈，如果有需求在考虑拓展功能！

使用

$ npm install xs-signature
$ npm install vue-signature-pad

$ yarn add xs-signature
$ yarn add vue-signature-pad

$ pnpm install xs-signature
$ pnpm install vue-signature-pad

引入

在项目入口文件引入
$ import "xs-signature/style.css"
$ import VueSignaturePad from "vue-signature-pad";
$ import XsSignature from "xs-signature"
app.use(VueSignaturePad)
app.use(XsSignature)

在业务组件使用
<xs-signature :csutom='false'/>

方法

| Name | Argument Type | Description | |:---------------------------------------------------------------|:--------------|------------------------------------------------------------------------------------| | overlayText | String | 自定义页面主体提示语 | | horizontalScreenText | String | 自定义翻转提示语 | | title | String | 自定义头部标题 | | showHeader | Boolean | 是否展示头部 | | showFooter | Boolean | 是否展示底部 | | custom | Boolean | 是否开启自定义模式(依旧保留头部、底部，不同于为可以自定义其中内容) 默认 'false' | | colorList | Array | 字体可选颜色集合 默认 '黑色' '红色' '蓝色' ([{id:Number:xxx,text:String:xxx,value:String:xxx}]) | | boldList | Array | 字体可选粗细集合 默认 '3' '6' '9' ([{id:Number:xxx,text:String:xxx,value:String:xxx}]) | | close() | Function | 回退一步的操作 | | reset() | Function | 清空页面所绘制签名操作 | | submit(isEmpty,data,orientation) | Function | 提交获取签名Base64 'empty':签名是否为空值、'data':签名后旋转裁切得到的Base64、'orientation':屏幕翻转方向 |

运行

注意：本项目属于二开组件，仅适用于彦祖学习和研究，其他人不得用于商业使用

学习

Vue Signature Pad - Best Practices for Smooth Signature Drawing in Vue Based on HTML5 Canvas

功能与建议

目前项目处于开发初期，新功能正在持续添加中，如果你对该组件有任何功能与建议，欢迎联系作者。 如果你也喜欢本插件的设计思想，非常感谢您对于我的支持，给项目点个星星吧！

许可协议

MIT © smallSun