当前位置：首页 > VUE

vue 移动端实现签名

2026-01-07 03:00:15VUE

Vue 移动端签名实现方法

在移动端实现签名功能，可以通过HTML5的Canvas结合触摸事件完成。以下是具体实现步骤：

使用Canvas绘制签名

安装vue-signature-pad插件或直接使用原生Canvas API：

npm install vue-signature-pad

组件示例代码：

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

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null
    }
  },
  mounted() {
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas
      this.ctx = this.canvas.getContext('2d')
      this.resizeCanvas()
    },
    resizeCanvas() {
      this.canvas.width = window.innerWidth * 0.9
      this.canvas.height = window.innerHeight * 0.5
    },
    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.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() {
      const image = this.canvas.toDataURL('image/png')
      console.log(image) // 可上传至服务器或本地保存
    }
  }
}
</script>

<style>
canvas {
  border: 1px solid #000;
  background-color: #fff;
  touch-action: none; /* 禁用默认触摸行为 */
}
</style>

优化移动端体验

添加以下CSS确保触摸事件正常：

body {
  touch-action: manipulation; /* 防止双击缩放 */
}

处理多点触控：

draw(e) {
  if (!this.isDrawing) return
  e.preventDefault() // 阻止默认滚动行为
  // ...原有绘制逻辑
}

第三方库方案

使用signature_pad库简化实现：

npm install signature_pad

组件示例：

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="clear">清除</button>
    <button @click="save">保存</button>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad'
export default {
  mounted() {
    this.signaturePad = new SignaturePad(this.$refs.canvas, {
      minWidth: 1,
      maxWidth: 3,
      backgroundColor: 'rgb(255, 255, 255)'
    })
    this.resizeCanvas()
  },
  methods: {
    resizeCanvas() {
      const canvas = this.$refs.canvas
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight * 0.5
    },
    clear() {
      this.signaturePad.clear()
    },
    save() {
      const data = this.signaturePad.toDataURL('image/png')
      console.log(data)
    }
  }
}
</script>