Vue电子签名

<template>
  <div class="signatureBox">
    <div class="signature-title">签名</div>
    <div ref="canvasHW" class="canvasBox">
      <canvas
        ref="canvasF"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        @mousedown="mouseDown"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      ></canvas>
    </div>
    <div class="signature-btn">
      <van-button class="btn" type="info" @click.native.prevent="handleGoBack()">返回</van-button>
      <van-button class="btn" type="info" @click.native.prevent="handleOverwrite()">重签</van-button>
      <van-button class="btn" type="info" @click.native.prevent="handleSubmit()">确认</van-button>
    </div>
  </div>
</template>
<script>
export default {
   
  name: "Signature",
  data() {
   
    return {
   
      points: [],
      canvasTxt: null,
      stage_info: [],
      startX: 0,
      startY: 0,
      moveY: 0,
      moveX: 0,
      isDown: false,
      strokeStyle: "#000",
      lineWidth: 2
    };
  },
  mounted() {
   
    this.initCanvas();
  },
  methods: {
   
    initCanvas() {
   
      let canvas = this.$refs.canvasF;
      // 获取画布的高度
      canvas.height = this.$refs.canvasHW.offsetHeight - 20;
      // 获取画布的宽度
      canvas.width = this.$refs.canvasHW.offsetWidth - 20;
      // 创建 context 对象
      this.canvasTxt = canvas.getContext("2d");
      this.stage_info = canvas.getBoundingClientRect(