vue实现签章
Vue 实现签章功能
签章功能通常包括手写签名、电子印章等。以下是基于 Vue 的实现方法：
使用 canvas 实现手写签名
安装依赖（如需要）：
npm install signature_pad组件代码示例：
<template>
<div>
<canvas ref="canvas" width="400" height="200"></canvas>
<button @click="clear">清除</button>
<button @click="save">保存</button>
</div>
</template>
<script>
import SignaturePad from 'signature_pad'
export default {
mounted() {
this.signaturePad = new SignaturePad(this.$refs.canvas)
},
methods: {
clear() {
this.signaturePad.clear()
},
save() {
const dataURL = this.signaturePad.toDataURL()
console.log(dataURL) // 可上传到服务器或本地保存
}
}
}
</script>电子印章实现方案
静态印章组件：
<template>
<div class="seal">
<div class="seal-circle">
<div class="seal-text">{{ sealText }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
sealText: {
type: String,
default: '公司印章'
}
}
}
</script>
<style>
.seal {
width: 150px;
height: 150px;
position: relative;
}
.seal-circle {
width: 100%;
height: 100%;
border: 3px solid red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.seal-text {
color: red;
font-weight: bold;
}
</style>拖拽签章功能实现
<template>
<div>
<div
class="stamp"
draggable="true"
@dragstart="dragStart"
>
拖拽印章
</div>
<div
class="document"
@dragover.prevent
@drop="drop"
>
文档区域
</div>
</div>
</template>
<script>
export default {
methods: {
dragStart(e) {
e.dataTransfer.setData('text/plain', 'stamp')
},
drop(e) {
const stamp = document.createElement('div')
stamp.className = 'dropped-stamp'
stamp.textContent = '印章'
stamp.style.position = 'absolute'
stamp.style.left = `${e.clientX}px`
stamp.style.top = `${e.clientY}px`
e.target.appendChild(stamp)
}
}
}
</script>签章保存与验证
保存签章到服务器：
async function uploadSignature(signatureData) {
try {
const response = await axios.post('/api/signature', {
image: signatureData
})
return response.data
} catch (error) {
console.error('上传失败', error)
}
}验证签章真实性时，可以在后端保存签章时的元数据（时间戳、用户ID等），前端通过接口获取验证信息。
注意事项
- 考虑添加防抖处理频繁的签名事件
- 移动端需要额外处理触摸事件
- 重要业务场景建议结合后端验证签章真实性
- 电子印章建议使用SVG实现以获得更好的清晰度
以上方案可根据实际需求进行组合和扩展，实现完整的签章功能。
