当前位置：首页 > VUE

vue 实现签名

2026-01-11 21:32:53VUE

Vue 实现签名功能

在 Vue 中实现签名功能可以通过第三方库或原生 Canvas 实现。以下是两种常见方法：

使用 Canvas 原生实现

通过 HTML5 的 Canvas 元素捕获用户绘制轨迹，适合轻量级需求。

<template>
  <div>
    <canvas 
      ref="canvas" 
      @mousedown="startDrawing" 
      @mousemove="draw" 
      @mouseup="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,
    };
  },
  mounted() {
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      const canvas = this.$refs.canvas;
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    },
    startDrawing(e) {
      this.isDrawing = true;
      const canvas = this.$refs.canvas;
      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.canvas;
      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.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    saveSignature() {
      const canvas = this.$refs.canvas;
      const dataURL = canvas.toDataURL('image/png');
      // 可以发送到服务器或触发下载
      console.log(dataURL);
    },
  },
};
</script>

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

使用第三方库 vue-signature-pad

对于更专业的签名需求，推荐使用封装好的库如 vue-signature-pad。

安装依赖：

npm install vue-signature-pad

组件实现：

<template>
  <div>
    <VueSignaturePad 
      ref="signaturePad" 
      width="100%" 
      height="300px"
      :options="{ penColor: '#000' }"
    />
    <button @click="undo">撤销</button>
    <button @click="clear">清除</button>
    <button @click="save">保存</button>
  </div>
</template>

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

export default {
  components: {
    VueSignaturePad,
  },
  methods: {
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
    save() {
      const { data } = this.$refs.signaturePad.saveSignature();
      console.log(data); // base64格式图片数据
      // 发送到服务器示例
      // this.$axios.post('/api/save-signature', { image: data });
    },
  },
};
</script>