vue实现页面签字

实现页面签字的Vue方案

使用Vue实现页面签字功能可以通过HTML5的Canvas或第三方库完成。以下是两种常见方法：

使用Canvas原生实现

在Vue组件中创建Canvas画布，通过鼠标/触摸事件捕获绘制路径：

<template>
  <div>
    <canvas 
      ref="signaturePad"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="stopDrawing">
    </canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0
    }
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      const canvas = this.$refs.signaturePad
      const rect = canvas.getBoundingClientRect()
      this.lastX = (e.clientX || e.touches[0].clientX) - rect.left
      this.lastY = (e.clientY || e.touches[0].clientY) - rect.top
    },
    draw(e) {
      if (!this.isDrawing) return
      const canvas = this.$refs.signaturePad
      const ctx = canvas.getContext('2d')
      const rect = canvas.getBoundingClientRect()
      const currentX = (e.clientX || e.touches[0].clientX) - rect.left
      const currentY = (e.clientY || e.touches[0].clientY) - rect.top

      ctx.beginPath()
      ctx.moveTo(this.lastX, this.lastY)
      ctx.lineTo(currentX, currentY)
      ctx.strokeStyle = '#000'
      ctx.lineWidth = 2
      ctx.stroke()

      this.lastX = currentX
      this.lastY = currentY
    },
    stopDrawing() {
      this.isDrawing = false
    },
    clearCanvas() {
      const canvas = this.$refs.signaturePad
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    },
    saveSignature() {
      const canvas = this.$refs.signaturePad
      const image = canvas.toDataURL('image/png')
      this.$emit('save', image)
    }
  },
  mounted() {
    const canvas = this.$refs.signaturePad
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight
  }
}
</script>

使用第三方库vue-signature-pad

安装依赖：

npm install vue-signature-pad

组件实现：

<template>
  <div>
    <VueSignaturePad 
      ref="signaturePad"
      :options="options"
      width="500px"
      height="300px"
    />
    <button @click="undo">撤销</button>
    <button @click="save">保存</button>
    <button @click="clear">清除</button>
  </div>
</template>

<script>
import VueSignaturePad from 'vue-signature-pad'

export default {
  components: { VueSignaturePad },
  data() {
    return {
      options: {
        penColor: "#000",
        backgroundColor: "#fff"
      }
    }
  },
  methods: {
    undo() {
      this.$refs.signaturePad.undoSignature()
    },
    save() {
      const { data } = this.$refs.signaturePad.saveSignature()
      this.$emit('save', data)
    },
    clear() {
      this.$refs.signaturePad.clearSignature()
    }
  }
}
</script>

关键注意事项

• 移动端适配需要处理touch事件
• 保存签名时可转换为Base64或Blob格式
• 清除功能需重置画布状态
• 考虑添加撤销(undo)功能提升用户体验
• 对于正式项目，建议使用成熟库如signature_pad或vue-signature-pad

两种方案均可实现电子签名功能，原生Canvas方案更轻量但需要自行处理更多细节，第三方库方案功能更完善但会增加包体积。