开源分享: 基于vue3的电子签名组件

github地址: https://github.com/open-vue3/vue3-sign

hello, 大家好, 我是徐小夕, 今天又到了分享时间. 之前和大家分享我开源的轻量级电子签名组件——react-sign2. 今天继续和大家分享一下小伙伴极客恰恰 贡献的vue3版电子签名组件vue3-sign.

我们可以使用它轻松的实现电子签名, 比如说常用的合同签字, 文稿签名, 艺术签名等, 并支持一键将签名保存为本地图片.

基本属性介绍

事件

实现思路

按照笔者之前的习惯, 在设计组件之前都会先明确组件的设计需求, 然后根据健壮组件的设计原则来落地组件, 这里给大家分享一下我总结的几条组件设计经验:

• 对组件进行严格的属性设计, 保证业务层能低成本使用组件, 并保持一定的可配性

• 组件内外部类型约定(ts规范), 并提供对逻辑的兼容性

• 可读性(代码格式统一清晰，注释完整，代码结构层次分明，编程范式使用得当)

• 可用性(代码功能完整，在不同场景都能很好兼容，业务逻辑覆盖率)

• 复用性(代码可以很好的被其他业务模块复用)

• 可维护性(代码易于维护和扩展，并有一定的向下/向上兼容性)

• 高性能(组件具有一定的性能, 如复杂场景的渲染, 计算等)

对于电子签名组件, 我们最小化的需求就是能满足用户的线上签名, 并能保存签名数据.

实现代码

由于代码使用vue3实现, 这里主要分校一下核心js实现, 详细代码可以参考 github : https://github.com/open-vue3/vue3-sign.