uni-app组件v-sign手写签名（修改PC端手写功能）

原组件v-sign
插件市场地址：https://ext.dcloud.net.cn/plugin?id=6806
github地址：https://github.com/jizai1125/v-sign
功能：修改pc端手写签名显示问题
修改：v-sign/v-sign.vue

<template>
  <view class="signature-wrap">
    <template v-if="isMobile">
      <canvas
        :canvas-id="cid"
        :id="cid"
        disable-scroll="false"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        :style="[
          {
            width: width && formatSize(width),
            height: height && formatSize(height),
          },
          customStyle,
        ]"
      ></canvas>
    </template>
    // 新增pc端
    <template v-else>
      <canvas
        :canvas-id="cid"
        :id="cid"
        disable-scroll="false"
        @mousedown="onMousedown"
        @mousemove="onMousemove"
        @mouseup="onMouseup"
        @mouseleave="onMouseleave"
        :style="[
          {
            width: width && formatSize(width),
            height: height && formatSize(height),
          },
          customStyle,
        ]"
      ></canvas>
    </template>
    <slot />
  </view>
</template>

data() {
    return {
      formatSize,
      lineData: [],
      winWidth: 0,
      winHeight: 0,
      penLineWidth: null, // v-sign-pen 组件设置的画笔大小
      penLineColor: null, // v-sign-color 组件设置的颜色
      isMouseDown: false,
      canvasDom: "",
      isMobile: true,
    };
 },
created() {
    // 获取窗口宽高
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    this.winWidth = windowWidth;
    this.winHeight = windowHeight;
    // #ifdef H5
    // 仅供参考，可自行判断
    this.isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);
    // #endif
  },
  mounted() {
    this.canvasCtx = uni.createCanvasContext(this.cid, this);
    // h5 需延迟绘制，否则绘制失败
    // #ifdef H5
    setTimeout(() => {
      // #endif
      this.setBackgroundColor(this.bgColor);
      // #ifdef H5
    }, 10);
    this.canvasDom = document.getElementById(this.canvasCtx.id);
    const uniAppNavigatorEl = document.getElementsByTagName("uni-page-head")[0];
    // uni-app顶部导航栏的高度
    this.navigationBarHeight =
      uniAppNavigatorEl &&
      parseFloat(window.getComputedStyle(uniAppNavigatorEl, null).height);
    // #endif
    // 初始化完成，触发 init 事件
    this.$emit("init", this.provideSignInterface());
  },
  methods:{
  	getMousePosition(e) {
      let canvasDomRect = this.canvasDom.getBoundingClientRect();
      // 鼠标在视图中的位置 - canvas在视图中的位置（这两个在消失在视图中时为负数）
      var left = e.clientX - canvasDomRect.x;
      // 使用uni-app的默认顶部导航栏需要加上高度，自定义不需要
      var top =
        e.clientY -
        canvasDomRect.y +
        (this.navigationBarHeight > 0 ? this.navigationBarHeight : 0);
      return { left, top };
    },
    onMousedown(e) {
      this.isMouseDown = true;
      let { left, top } = this.getMousePosition(e);
      this.lineData.push({
        style: {
          color: this.penLineColor || this.lineColor,
          width: this.penLineWidth || this.lineWidth,
        },
        // 屏幕坐标
        coordinates: [
          {
            type: e.type,
            x: left,
            y: top,
          },
        ],
      });
      this.drawLine();
    },
    onMousemove(e) {
      if (this.isMouseDown) {
        let { left, top } = this.getMousePosition(e);
        this.lineData[this.lineData.length - 1].coordinates.push({
          type: e.type,
          x: left,
          y: top,
        });
        this.drawLine();
      }
    },
    onMouseup(e) {
      if (this.isMouseDown) {
        this.$emit("end", this.lineData);
      }
      this.isMouseDown = false;
    },
    onMouseleave() {
      this.onMouseup();
    },
  }

revoke中:
pos.type == "touchstart"修改为pos.type == "touchstart" || pos.type == "mousedown"

截图
pc端：

移动端：

修改过的代码已全部提供（由于csdn没有地方标识哪些是新增的或者我没找到，所以就整块贴出了），其余原代码并未全部贴出，可自行下载；