vue移动端实现横屏手写签名

要在Vue移动端实现横屏手写签名功能，可以使用HTML5的canvas元素和JavaScript来实现。首先，你需要创建一个canvas元素，并设置其宽高比，以便在横屏模式下正确显示。然后，你需要监听设备方向变化事件，根据设备方向动态调整canvas元素的宽高比，以便在横屏模式下正确显示。最后，你需要监听用户手写事件，并在canvas元素上绘制用户手写的签名。

以下是示例代码，可以在移动设备上测试：

<template>
  <div class="canvas-container">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听设备方向变化事件
    window.addEventListener("orientationchange", this.onOrientationChange);
    
    // 初始化canvas
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      
      // 设置canvas宽高比为3:2
      canvas.width = 300;
      canvas.height = 200;
      
      // 监听用户手写事件
      canvas.addEventListener("touchstart", this.onTouchStart);
      canvas.addEventListener("touchmove", this.onTouchMove);
      canvas.addEventListener("touchend", this.onTouchEnd);
    },
    onOrientationChange() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      
      // 根据设备方向动态调整canvas宽高比
      if (window.orientation === 90 || window.orientation === -90) {
        canvas.width = 200;
        canvas.height = 300;
      } else {
        canvas.width = 300;
        canvas.height = 200;
      }
      
      // 清空canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    onTouchStart(event) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      
      // 开始绘制路径
      ctx.beginPath();
      
      // 获取触点位置
      const touch = event.touches[0];
      const x = touch.pageX - canvas.offsetLeft;
      const y = touch.pageY - canvas.offsetTop;
      
      // 移动到触点位置
      ctx.moveTo(x, y);
    },
    onTouchMove(event) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      
      // 获取触点位置
      const touch = event.touches[0];
      const x = touch.pageX - canvas.offsetLeft;
      const y = touch.pageY - canvas.offsetTop;
      
      // 绘制直线到触点位置
      ctx.lineTo(x, y);
      ctx.stroke();
    },
    onTouchEnd() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      
      // 结束路径绘制
      ctx.closePath();
    }
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener("orientationchange", this.onOrientationChange);
    const canvas = this.$refs.canvas;
    canvas.removeEventListener("touchstart", this.onTouchStart);
    canvas.removeEventListener("touchmove", this.onTouchMove);
    canvas.removeEventListener("touchend", this.onTouchEnd);
  }
};
</script>

<style scoped>
.canvas-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  border: 1px solid #ccc;
}
</style>

在上面的示例中，我们创建了一个canvas元素，并设置了其宽高比为3:2，以便在竖屏模式下正确显示。我们还监听了设备方向变化事件，根据设备方向动态调整canvas元素的宽高比。我们还监听了用户手写事件，并在canvas元素上绘制用户手写的签名。当用户完成签名后，可以将canvas元素上的图像数据保存到服务器或本地存储中。