当前位置：首页 > VUE

vue怎么实现手写协议

2026-01-22 12:33:02VUE

实现手写协议功能

在Vue中实现手写协议功能，可以通过集成手写签名库或使用Canvas绘图技术。以下是两种常见的实现方式：

使用签名库（如signature_pad）

安装signature_pad库：

npm install signature_pad

在Vue组件中引入并使用：

<template>
  <div>
    <canvas ref="signaturePad" width="500" height="200"></canvas>
    <button @click="clearSignature">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad'

export default {
  data() {
    return {
      signaturePad: null
    }
  },
  mounted() {
    this.signaturePad = new SignaturePad(this.$refs.signaturePad)
  },
  methods: {
    clearSignature() {
      this.signaturePad.clear()
    },
    saveSignature() {
      if (this.signaturePad.isEmpty()) {
        alert('请先签名')
        return
      }
      const signatureData = this.signaturePad.toDataURL()
      // 发送到服务器或保存到本地
      console.log(signatureData)
    }
  }
}
</script>

使用原生Canvas实现

创建自定义手写签名组件：

<template>
  <div>
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="stopDrawing"
      width="500"
      height="200"
      style="border: 1px solid #000;"
    ></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveCanvas">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0
    }
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      this.lastX = e.clientX - rect.left
      this.lastY = e.clientY - rect.top
    },
    draw(e) {
      if (!this.isDrawing) return

      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const rect = canvas.getBoundingClientRect()
      const currentX = e.clientX - rect.left
      const currentY = e.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.canvas
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    },
    saveCanvas() {
      const canvas = this.$refs.canvas
      const imageData = canvas.toDataURL('image/png')
      // 发送到服务器或保存到本地
      console.log(imageData)
    }
  }
}
</script>