vue实现签名

Vue 可以通过 canvas 实现签名功能，具体步骤如下：

1. 在 Vue 模板中添加一个 canvas 标签和两个按钮，一个用于清空签名，一个用于保存签名。

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

2. 在 Vue 的 mounted 钩子函数中获取 canvas 对象，并设置画笔颜色和线条宽度。

mounted() {
  this.canvas = this.$refs.canvas;
  this.ctx = this.canvas.getContext('2d');
  this.ctx.strokeStyle = '#000'; // 画笔颜色
  this.ctx.lineWidth = 2; // 线条宽度
},

3. 监听鼠标事件，在鼠标移动时绘制线条。

methods: {
  startDraw(e) {
    this.isDrawing = true;
    this.lastX = e.offsetX;
    this.lastY = e.offsetY;
  },
  draw(e) {
    if (!this.isDrawing) return;
    this.ctx.beginPath();
    this.ctx.moveTo(this.lastX, this.lastY);
    this.ctx.lineTo(e.offsetX, e.offsetY);
    this.ctx.stroke();
    this.lastX = e.offsetX;
    this.lastY = e.offsetY;
  },
  endDraw() {
    this.isDrawing = false;
  }
},

4. 实现清空和保存功能。

methods: {
  clear() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  save() {
    const dataURL = this.canvas.toDataURL();
    console.log(dataURL); // 可以将 dataURL 发送到后端进行保存
  }
},

完整代码如下：

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

<script>
export default {
  data() {
    return {
      canvas: null, // canvas 对象
      ctx: null, // 画笔对象
      isDrawing: false, // 是否正在绘制
      lastX: 0, // 上一个点的 x 坐标
      lastY: 0 // 上一个点的 y 坐标
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.ctx.strokeStyle = '#000'; // 画笔颜色
    this.ctx.lineWidth = 2; // 线条宽度
  },
  methods: {
    startDraw(e) {
      this.isDrawing = true;
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.beginPath();
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    endDraw() {
      this.isDrawing = false;
    },
    clear() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    save() {
      const dataURL = this.canvas.toDataURL();
      console.log(dataURL); // 可以将 dataURL 发送到后端进行保存
    }
  }
};
</script>

使用时只需要将组件引入到需要的页面即可。