在Vue中封装一个手写签名组件，你可以使用<canvas>元素来实现。以下是一个简单的例子：
<template>
<div>
<canvas
ref="signatureCanvas"
@mousedown="startSigning"
@mousemove="updateSigning"
@mouseup="endSigning"
@touchstart="startSigning"
@touchmove="updateSigning"
@touchend="endSigning"
></canvas>
</div>
</template>
<script>
export default {
data() {
return {
canvas: null,
context: null,
isSigning: false
};
},
methods: {
startSigning(e) {
e.preventDefault();
this.isSigning = true;
const canvas = this.$refs.signatureCanvas;
this.context = canvas.getContext("2d");
// Reset canvas if it's not empty
this.context.clearRect(0, 0, canvas.width, canvas.height);
const { x, y } = this.getCoordinates(e);
this.context.moveTo(x, y);
},
updateSigning(e) {
e.preventDefault();
if (this.isSigning) {
const { x, y } = this.getCoordinates(e);
this.context.lineTo(x, y);
this.context.stroke();
}
},
endSigning() {
this.isSigning = false;
},
getCoordinates(e) {
const rect = e.target.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
},
mounted() {
const canvas = this.$refs.signatureCanvas;
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
this.context = canvas.getContext("2d");
this.context.strokeStyle = "black";
this.context.lineWidth = 2;
this.context.lineJoin = "round";
}
};
</script>
<style scoped>
canvas {
border: 1px solid #000;
touch-action: none;
}
</style>在这个组件中，你可以通过鼠标或触摸来进行签名。组件挂载时，设置<canvas>的宽高。在鼠标按下（mousedown）或触摸开始（touchstart）时开始签名，在移动（mousemove或touchmove）时绘制签名，在鼠标抬起（mouseup）或触摸结束（touchend）时结束签名。
你可以通过context.clearRect方法来重置画布，也可以通过context.strokeStyle和context.lineWidth来设置签名的颜色和宽度。
使用这个组件时，你可以直接将它放入你的Vue应用中的任何位置。这个组件提供了基本的签名功能，你可以根据需要添加更多的特性，比如保存签名图片、清除签名等。