当前位置：首页 > VUE

vue实现页面签字

2026-01-15 03:37:52VUE

实现页面签名的Vue方案

在Vue中实现页面签名功能，可以通过HTML5的Canvas元素结合手势或鼠标事件来捕获用户绘制轨迹。以下是具体实现方法：

安装签名库（可选）

使用现成的Vue签名库如vue-signature-pad可以快速实现：

npm install vue-signature-pad

<template>
  <vue-signature-pad 
    ref="signaturePad" 
    :options="{ penColor: '#000' }"
  />
  <button @click="clear">清除</button>
  <button @click="save">保存</button>
</template>

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

export default {
  components: { VueSignaturePad },
  methods: {
    clear() {
      this.$refs.signaturePad.clearSignature()
    },
    save() {
      const { data } = this.$refs.signaturePad.saveSignature()
      console.log(data) // 获取Base64格式的签名图片
    }
  }
}
</script>

原生Canvas实现

如需完全自定义，可通过原生Canvas实现：

<template>
  <canvas 
    ref="canvas"
    @mousedown="startDrawing"
    @mousemove="draw"
    @mouseup="stopDrawing"
    @touchstart="startDrawing"
    @touchmove="draw"
    @touchend="stopDrawing"
  ></canvas>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas
    this.ctx = this.canvas.getContext('2d')
    this.resizeCanvas()
    window.addEventListener('resize', this.resizeCanvas)
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = this.canvas.offsetWidth
      this.canvas.height = this.canvas.offsetHeight
    },
    startDrawing(e) {
      this.isDrawing = true
      this.draw(e)
    },
    draw(e) {
      if (!this.isDrawing) return

      const rect = this.canvas.getBoundingClientRect()
      const x = (e.clientX || e.touches[0].clientX) - rect.left
      const y = (e.clientY || e.touches[0].clientY) - rect.top

      this.ctx.lineWidth = 2
      this.ctx.lineCap = 'round'
      this.ctx.strokeStyle = '#000'
      this.ctx.lineTo(x, y)
      this.ctx.stroke()
      this.ctx.beginPath()
      this.ctx.moveTo(x, y)
    },
    stopDrawing() {
      this.isDrawing = false
      this.ctx.beginPath()
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    saveSignature() {
      return this.canvas.toDataURL('image/png')
    }
  }
}
</script>

移动端适配要点

添加@touch系列事件支持触摸屏
通过e.touches[0]获取触摸点坐标
CSS设置canvas为100%宽度并禁用默认触摸行为：
```
canvas {
width: 100%;
touch-action: none;
}
```

签名保存与验证

将Canvas转为Base64或Blob格式：


// PNG格式
const dataURL = canvas.toDataURL('image/png')

// 或Blob格式 canvas.toBlob(blob => { const formData = new FormData() formData.append('signature', blob) // 上传到服务器 })


2. 添加签名验证逻辑（如最小绘制长度检测）：
```javascript
validateSignature() {
  const blankCanvas = document.createElement('canvas')
  blankCanvas.width = this.canvas.width
  blankCanvas.height = this.canvas.height
  return this.canvas.toDataURL() !== blankCanvas.toDataURL()
}