当前位置：首页 > VUE

vue实现签名

2026-01-11 21:25:18VUE

实现签名功能的基本思路

在Vue中实现签名功能通常需要结合HTML5的Canvas元素，通过监听用户的鼠标或触摸事件来绘制签名。核心步骤包括创建Canvas画布、监听绘制事件、保存签名图片等。

vue实现签名

安装依赖（可选）

如果需要更高级的签名功能，可以使用现成的Vue签名组件库，例如vue-signature-pad：

vue实现签名

npm install vue-signature-pad

基础Canvas实现方法

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

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
    }
  },
  mounted() {
    this.setupCanvas()
  },
  methods: {
    setupCanvas() {
      const canvas = this.$refs.signatureCanvas
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
      this.ctx = canvas.getContext('2d')
      this.ctx.strokeStyle = '#000'
      this.ctx.lineWidth = 2
      this.ctx.lineCap = 'round'
    },
    startDrawing(e) {
      this.isDrawing = true
      const pos = this.getPosition(e)
      this.lastX = pos.x
      this.lastY = pos.y
    },
    draw(e) {
      if (!this.isDrawing) return
      const pos = this.getPosition(e)
      this.ctx.beginPath()
      this.ctx.moveTo(this.lastX, this.lastY)
      this.ctx.lineTo(pos.x, pos.y)
      this.ctx.stroke()
      this.lastX = pos.x
      this.lastY = pos.y
    },
    stopDrawing() {
      this.isDrawing = false
    },
    getPosition(e) {
      const canvas = this.$refs.signatureCanvas
      const rect = canvas.getBoundingClientRect()
      return {
        x: (e.clientX || e.touches[0].clientX) - rect.left,
        y: (e.clientY || e.touches[0].clientY) - rect.top
      }
    },
    clearSignature() {
      const canvas = this.$refs.signatureCanvas
      this.ctx.clearRect(0, 0, canvas.width, canvas.height)
    },
    saveSignature() {
      const canvas = this.$refs.signatureCanvas
      const image = canvas.toDataURL('image/png')
      // 可以发送到服务器或保存到本地
      console.log(image)
    }
  }
}
</script>

<style scoped>
canvas {
  border: 1px solid #000;
  background-color: #fff;
  width: 100%;
  height: 300px;
}
</style>

使用vue-signature-pad组件

<template>
  <div>
    <VueSignaturePad 
      ref="signaturePad"
      width="100%"
      height="300px"
      :options="options"
    />
    <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 { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      if (!isEmpty) {
        console.log(data) // base64格式图片数据
      }
    },
    clear() {
      this.$refs.signaturePad.clearSignature()
    }
  }
}
</script>

移动端适配要点

对于移动设备，需要特别处理触摸事件并添加以下CSS属性：

canvas {
  touch-action: none; /* 防止页面滚动 */
  -webkit-user-select: none; /* 防止文本选择 */
  user-select: none;
}

保存签名数据

签名可以保存为多种格式：

// 获取Base64编码的PNG图片
const dataURL = canvas.toDataURL('image/png')

// 获取Blob对象
canvas.toBlob(blob => {
  const formData = new FormData()
  formData.append('signature', blob)
  // 上传到服务器
}, 'image/png')