在Vue3中实现签名功能

在 Vue3 中实现签名功能可以通过 HTML5 Canvas 实现。以下是详细的实现步骤和代码示例：

---

一、基础实现

1. 创建组件 SignaturePad.vue

<template>
  <div class="signature-container">
    <!-- 签名画布 -->
    <canvas
      ref="canvasRef"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="endDrawing"
      @mouseleave="endDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="endDrawing"
    ></canvas>

    <!-- 操作按钮 -->
    <div class="controls">
      <button @click="clearCanvas">清除</button>
      <button @click="saveSignature">保存</button>
    </div>
  </div>
</template>

<script setup>
import {
      ref, onMounted } from 'vue'