vue 实现签名框手写签名的功能 addEventListener是null值

关于你的问题，可能是因为你没有正确地添加事件侦听器导致的。你可以尝试检查一下代码，确保事件侦听器已经正确地绑定到签名框上，而不是绑定到其它的元素上。此外，你可以尝试使用Vue.js官方提供的v-on指令来添加事件侦听器，而不是使用原生的addEventListener方法。这样应该可以解决你遇到的问题。希望这能帮到你！

相关问题

vue 实现签名框手写签名的功能

好的，关于vue实现签名框手写签名的功能，可以使用HTML5的canvas标签实现。具体可以参考以下步骤：

1. 在vue组件中引入canvas标签，并设置该标签的宽高和边框等样式。如下：

<canvas id="canvas" width="400" height="200" style="border:1px solid #000000;"></canvas>

2. 在vue组件的mounted生命周期中获取canvas对象，并设置canvas的绘制样式。如下：

mounted() {
  this.canvas = document.getElementById('canvas');
  this.ctx = this.canvas.getContext('2d');
  this.ctx.lineWidth = 2;  // 设置笔画宽度
  this.ctx.strokeStyle = '#000000';  // 设置笔画颜色
}

3. 在提供签名功能的按钮事件中，绑定canvas的鼠标事件。如下：

<button @click="startDrawing">签名</button>

startDrawing方法中绑定事件：

startDrawing() {
  this.drawing = true;
  this.canvas.addEventListener('mousedown', this.onMouseDown);
  this.canvas.addEventListener('mouseup', this.onMouseUp);
  this.canvas.addEventListener('mousemove', this.onMouseMove);
}

4. 监听canvas的鼠标事件，实现手写签名。如下：

onMouseDown(e) {
  this.ctx.beginPath();
  this.ctx.moveTo(e.offsetX, e.offsetY);
  this.mouseMoved = false;
}

onMouseMove(e) {
  if (this.drawing) {
    this.mouseMoved = true;
    this.ctx.lineTo(e.offsetX, e.offsetY);
    this.ctx.stroke();
  }
}

onMouseUp(e) {
  if (!this.mouseMoved) {
    this.ctx.fillRect(e.offsetX - 1, e.offsetY - 1, 2, 2);
  }
  this.drawing = false;
  this.canvas.removeEventListener('mousedown', this.onMouseDown);
  this.canvas.removeEventListener('mouseup', this.onMouseUp);
  this.canvas.removeEventListener('mousemove', this.onMouseMove);
}

以上就是通过canvas实现vue签名框手写签名的功能的具体步骤。希望能对您有所帮助。

vue+elementUI 代码实现一个手写签名的功能

好的，针对您的问题，我可以给您提供一个基于 Vue 和 ElementUI 的手写签名实现代码，您可以参考下面的代码：

<template>
  <div class="signature-container">
    <div class="signature-canvas" ref="canvasContainer">
      <canvas class="signature-canvas-element" ref="canvas" @mousedown="startDrawing" @mouseup="endDrawing" @mousemove="draw"></canvas>
    </div>
    <el-button @click="clearCanvas">Clear</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastPosition: null,
      canvas: null
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.canvas.width = this.$refs.canvasContainer.offsetWidth;
    this.canvas.height = this.$refs.canvasContainer.offsetHeight;
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      this.lastPosition = this.getMousePosition(event);
    },
    endDrawing() {
      this.isDrawing = false;
    },
    draw(event) {
      if (!this.isDrawing) return;

      const currentPos = this.getMousePosition(event);
      const ctx = this.canvas.getContext("2d");

      ctx.beginPath();

      ctx.moveTo(this.lastPosition.x, this.lastPosition.y);
      ctx.lineTo(currentPos.x, currentPos.y);

      ctx.lineWidth = 2;
      ctx.strokeStyle = "#000000";
      ctx.stroke();
     
      this.lastPosition = currentPos;
    },
    clearCanvas() {
      const ctx = this.canvas.getContext("2d");
      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    getMousePosition(event) {
      const rect = this.canvas.getBoundingClientRect();
      const scaleX = this.canvas.width / rect.width;
      const scaleY = this.canvas.height / rect.height;

      return {
        x: (event.clientX - rect.left) * scaleX,
        y: (event.clientY - rect.top) * scaleY
      }
    }
  }
}
</script>

<style>
.signature-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.signature-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
  border: 1px solid #000000;
}

.signature-canvas-element {
  width: 100%;
  height: 100%;
}
</style>

此代码实现了一个简单的手写签名组件，其中利用 HTML5 的 Canvas 元素来实现手写功能。您可以在 Vue 组件中使用此代码，并结合 ElementUI 的 Button 组件来提供“清除”功能。当用户在 Canvas 中绘制时，我们可以利用 CanvasRenderingContext2D 中的绘图 API 完成绘制功能。同时，我们采用鼠标事件来跟踪用户的绘制动作，以便在 Canvas 上进行相应的绘制操作。

希望这段代码可以帮助到您！