Vue 实现手写签名功能的方法

在许多业务场景中，手写签名功能有着重要的应用，比如合同签署、审批流程等。借助 Vue 的强大功能，我们可以轻松实现这一功能。

我们需要创建一个画布来接收用户的手写输入。在 Vue 组件的模板中，添加一个 <canvas> 元素，为其设置适当的宽高。例如：

<template>
  <canvas id="signatureCanvas" ref="signatureCanvasRef" width="400" height="200"></canvas>
</template>

接着在 Vue 组件的脚本部分，获取画布的上下文。在 mounted 钩子函数中进行如下操作：

export default {
  data() {
    return {
      ctx: null
    };
  },
  mounted() {
    const canvas = this.$refs.signatureCanvasRef;
    this.ctx = canvas.getContext('2d');
    this.ctx.lineWidth = 2;
    this.ctx.strokeStyle = 'black';
  }
};

为了实现手写签名的绘制，我们要监听画布的 mousedown、mousemove 和 mouseup 事件。可以通过 @ 指令在模板中绑定这些事件，也可以在脚本中使用 addEventListener 来绑定。

export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0
    };
  },
  mounted() {
    const canvas = this.$refs.signatureCanvasRef;
    this.ctx = canvas.getContext('2d');
    this.ctx.lineWidth = 2;
    this.ctx.strokeStyle = 'black';

    canvas.addEventListener('mousedown', this.startDrawing);
    canvas.addEventListener('mousemove', this.draw);
    canvas.addEventListener('mouseup', this.stopDrawing);
    canvas.addEventListener('mouseout', this.stopDrawing);
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
    },
    draw(e) {
      if (this.isDrawing) {
        this.ctx.beginPath();
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(e.offsetX, e.offsetY);
        this.ctx.stroke();
        [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
      }
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  }
};

如果需要将签名保存下来，可以使用 toDataURL 方法将画布内容转换为图片格式，例如：

saveSignature() {
  const signatureData = this.$refs.signatureCanvasRef.toDataURL('image/png');
  // 这里可以将 signatureData 发送到后端进行保存
}

通过以上步骤，我们就利用 Vue 成功实现了手写签名功能。该功能不仅增强了用户体验，也满足了许多实际业务需求。在实际应用中，还可以进一步优化，比如添加颜色选择、线条粗细调整等功能，以满足更复杂的场景需求。