vue封装独立组件：实现手写签名功能

在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应用中的任何位置。这个组件提供了基本的签名功能，你可以根据需要添加更多的特性，比如保存签名图片、清除签名等。