vue2 实现电子签名

Vue.js是一种流行的JavaScript框架，用于构建用户界面。要在Vue.js中实现电子签名，可以使用HTML5的Canvas元素和一些JavaScript库来实现。

以下是一个简单的示例，演示如何在Vue.js中实现电子签名：

1. 首先，在Vue组件中添加一个Canvas元素，用于绘制签名：

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

2. 在Vue组件的`data`中添加一些变量来跟踪绘图状态和保存签名的数据：

<script>
export default {
  data() {
    return {
      drawing: false,
      context: null,
      lastX: 0,
      lastY: 0,
      signatureData: null
    };
  },
  mounted() {
    this.context = this.$refs.canvas.getContext('2d');
  },
  methods: {
    startDrawing(event) {
      this.drawing = true;
      this.lastX = event.clientX - this.$refs.canvas.offsetLeft;
      this.lastY = event.clientY - this.$refs.canvas.offsetTop;
    },
    draw(event) {
      if (!this.drawing) return;
      const x = event.clientX - this.$refs.canvas.offsetLeft;
      const y = event.clientY - this.$refs.canvas.offsetTop;
      this.context.beginPath();
      this.context.moveTo(this.lastX, this.lastY);
      this.context.lineTo(x, y);
      this.context.stroke();
      this.lastX = x;
      this.lastY = y;
    },
    stopDrawing() {
      this.drawing = false;
    },
    clearCanvas() {
      this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    },
    saveSignature() {
      this.signatureData = this.$refs.canvas.toDataURL(); // 将签名保存为Base64编码的图像数据
    }
  }
};
</script>

在上面的代码中，`startDrawing`、`draw`和`stopDrawing`方法用于跟踪鼠标移动并在Canvas上绘制签名。`clearCanvas`方法用于清除Canvas上的内容。`saveSignature`方法将签名保存为Base64编码的图像数据。

3. 最后，在Vue组件中使用这个Canvas组件：

<template>
  <div>
    <SignatureCanvas></SignatureCanvas>
    <img v-if="signatureData" :src="signatureData" alt="Signature">
  </div>
</template>

<script>
import SignatureCanvas from './SignatureCanvas.vue';

export default {
  components: {
    SignatureCanvas
  }
};
</script>

在上面的代码中，我们使用了一个自定义的`SignatureCanvas`组件来实现签名功能，并在签名完成后显示签名图像。

这只是一个简单的示例，你可以根据自己的需求进行扩展和定制。希望对你有所帮助！