vue h5 签名板

Vue H5 签名板可以通过使用 HTML5 的 Canvas 元素来实现。以下是一个简单的示例：

1. 在 Vue 组件中添加一个 Canvas 元素：

<canvas ref="canvas" @touchstart="startSign" @touchmove="signing" @touchend="endSign"></canvas>

2. 在 Vue 组件的 methods 中添加以下代码：

methods: {
  startSign(e) {
    const canvas = this.$refs.canvas;
    this.ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    this.lastX = e.touches[0].clientX - rect.left;
    this.lastY = e.touches[0].clientY - rect.top;
    this.ctx.beginPath();
  },
  signing(e) {
    const canvas = this.$refs.canvas;
    const rect = canvas.getBoundingClientRect();
    const x = e.touches[0].clientX - rect.left;
    const y = e.touches[0].clientY - rect.top;
    this.ctx.moveTo(this.lastX, this.lastY);
    this.ctx.lineTo(x, y);
    this.ctx.stroke();
    this.lastX = x;
    this.lastY = y;
  },
  endSign() {
    // 在这里获取签名图片并进行处理
  }
}

3. 在 endSign 方法中，可以通过以下代码来获取签名图片并进行处理：

const canvas = this.$refs.canvas;
const dataURL = canvas.toDataURL();

这个 dataURL 就是签名图片的 Base64 编码字符串，可以用来显示或者上传到服务器。

以上就是一个简单的 Vue H5 签名板的实现方法。