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.

后期规划

欢迎大家共建.

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

https://juejin.cn/post/7174251833773752350

本文标题：开源分享:基于vue3的电子签名组件
文章地址：http://www.jxjierui.cn/article/dhedgge.html