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 上进行相应的绘制操作。

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