github地址: https://github.com/open-vue3/vue3-sign
hello, 大家好, 我是徐小夕, 今天又到了分享时间. 之前和大家分享我开源的轻量级电子签名组件——react-sign2. 今天继续和大家分享一下小伙伴极客恰恰
贡献的vue3
版电子签名组件vue3-sign
.
![aff0295aa60fa35077847665634557f6.gif](https://i-blog.csdnimg.cn/blog_migrate/514af7bc52b73dec31f6394f9a1cd099.gif)
我们可以使用它轻松的实现电子签名, 比如说常用的合同签字, 文稿签名, 艺术签名等, 并支持一键将签名保存为本地图片.
基本属性介绍
![fdbcc6c34e6b7dff32a2abe60d15b35f.png](https://i-blog.csdnimg.cn/blog_migrate/dcb1780577ce0af97509e74a66a6c708.png)
事件
![e7ee34c74f1712dbd85b76bdbe257309.png](https://i-blog.csdnimg.cn/blog_migrate/55348cf3beb8f1ef4bd8425d85583f62.png)
实现思路
按照笔者之前的习惯, 在设计组件之前都会先明确组件的设计需求, 然后根据健壮组件的设计原则来落地组件, 这里给大家分享一下我总结的几条组件设计经验:
对组件进行严格的属性设计, 保证业务层能低成本使用组件, 并保持一定的可配性
组件内外部类型约定(ts规范), 并提供对逻辑的兼容性
可读性(代码格式统一清晰,注释完整,代码结构层次分明,编程范式使用得当)
可用性(代码功能完整,在不同场景都能很好兼容,业务逻辑覆盖率)
复用性(代码可以很好的被其他业务模块复用)
可维护性(代码易于维护和扩展,并有一定的向下/向上兼容性)
高性能(组件具有一定的性能, 如复杂场景的渲染, 计算等)
对于电子签名组件, 我们最小化的需求就是能满足用户的线上签名, 并能保存签名数据.
![5c2355973a01b69ca84577b18b0e1428.png](https://i-blog.csdnimg.cn/blog_migrate/33f23262c563dafcd95e2a7c17cefc1f.png)
实现代码
由于代码使用vue3
实现, 这里主要分校一下核心js
实现, 详细代码可以参考 github
: https://github.com/open-vue3/vue3-sign.