一个支持鼠标、手写笔绘制签名的Vue3签名板组件、可保存为 PNG/JPEG/SVG

今天推荐的两款软件一个是画画的一个是签名的，都是画来画去，因为我项目里需要集成一个签名的组件，所以找了几个，正好一起分享一下

电子签名 ：支持鼠标/手写笔绘制签名
导出功能 ：可保存为 PNG/JPEG/SVG 格式图片
撤销操作 ：支持撤销上一笔绘制
自定义样式 ：可配置笔颜色、背景色、笔粗细等
尺寸控制 ：可设置签名板的宽高水印支持 ：支持添加水印
响应式 ：支持窗口 resize 时缩放或重新绘制

支持多种安装方式

ts
# ✨ Auto-detectnpx nypm install @selemondev/vue3-signature-pad
# npmnpm install @selemondev/vue3-signature-pad
# yarnyarn add @selemondev/vue3-signature-pad
# pnpmpnpm install @selemondev/vue3-signature-pad
# bunbun install @selemondev/vue3-signature-pad
# denodeno install @selemondev/vue3-signature-pad

html
<script setup>import { ref } from 'vue'import { VueSignaturePad } from '@selemondev/vue3-signature-pad'const signaturePadRef = ref(null)const signatureDataUrl = ref('')const clear = () => {  if (signaturePadRef.value) {    signaturePadRef.value.clearCanvas()    signatureDataUrl.value = ''  }}const save = () => {  if (signaturePadRef.value) {    if (signaturePadRef.value.isCanvasEmpty()) {      alert('签名不能为空！')      return    }    signatureDataUrl.value = signaturePadRef.value.toDataURL()  }}const undo = () => {  if (signaturePadRef.value) {    signaturePadRef.value.undo()  }}</script>
<template>  
<div class="container">    
<h1>Vue3 签名板示例</h1>
<div class="signature-container">     
<VueSignaturePad        
ref="signaturePadRef"        
height="400px"        
width="100%"        
:max-width="2"        
:min-width="2"        
:option="{ penColor: '#000000', backgroundColor: '#ffffff' }"      />    
</div>
<div class="buttons">      
<button @click="clear">清除</button>      
<button @click="undo">撤销</button>      
<button @click="save">保存签名</button>    
</div>
<div v-if="signatureDataUrl" class="preview">      
<h3>签名预览</h3>      
<img :src="signatureDataUrl" alt="签名预览" class="signature-preview" />    
</div>  
</div>
</template>
<style scoped>.container {  max-width: 800px;  margin: 0 auto;  padding: 20px;}h1 {  text-align: center;  margin-bottom: 30px;}.signature-container {  border: 2px solid #ccc;  border-radius: 8px;  background: white;  margin-bottom: 20px;}.signature-pad {  width: 100%;  height: 300px;}.buttons {  text-align: center;  margin-bottom: 30px;}.preview {  margin-top: 30px;  padding: 20px;  border: 2px dashed #ccc;  border-radius: 8px;}.signature-preview {  max-width: 100%;  border: 1px solid #eee;  border-radius: 4px;}</style>

这个项目是扫码签字，在服务器端生成一个二维码，包含用户ID等信息，用户扫描后签名后，数据存到服务器。有时间我整理一下扫码的代码后续再发出来吧~

项目地址：

ts
https://github.com/selemondev/vue3-signature-pad