记录一次 chatgpt 对 vue-grid-layout 兼容 windows 触屏设备 的处理

记录一次 chatgpt 对 vue-grid-layout 兼容 windows 触屏设备 的处理

chatgpt 确实是有东西的, 由于工作需要在windows 触屏上使用 vue-grid-layout, 但是发现 vue-grid-layout 在windows触屏设备上 无法通过拖拽调整大小, 于是乎 请教了 “C老师”, 以下是 “C老师” 给出的方案, 代码 不多, 但是思路个人觉得非常棒, 记录下来

<template>
  <GridLayout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :vertical-compact="true"
    :use-css-transforms="true"
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <div class="grid-item-content">{{ item.i }}</div>
    </GridItem>
  </GridLayout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  components: {
    GridLayout,
    GridItem,
  },
  data() {
    return {
      layout: [
        { i: '0', x: 0, y: 0, w: 2, h: 2 },
        { i: '1', x: 2, y: 0, w: 2, h: 4 },
        { i: '2', x: 4, y: 0, w: 2, h: 5 },
        { i: '3', x: 6, y: 0, w: 2, h: 3 },
        { i: '4', x: 8, y: 0, w: 2, h: 3 },
      ],
    };
  },
  methods: {
    onTouchStart(event) {
      this.convertTouchToMouse(event);
    },
    onTouchMove(event) {
      this.convertTouchToMouse(event);
    },
    onTouchEnd(event) {
      this.convertTouchToMouse(event);
    },
    convertTouchToMouse(event) {
      const touch = event.touches[0] || event.changedTouches[0];
      const mouseEvent = new MouseEvent(event.type.replace('touch', 'mouse'), {
        bubbles: true,
        cancelable: true,
        view: window,
        detail: 1,
        screenX: touch.screenX,
        screenY: touch.screenY,
        clientX: touch.clientX,
        clientY: touch.clientY,
        ctrlKey: event.ctrlKey,
        altKey: event.altKey,
        shiftKey: event.shiftKey,
        metaKey: event.metaKey,
        button: 0,
        relatedTarget: null,
      });
      event.target.dispatchEvent(mouseEvent);
      event.preventDefault();
    },
  },
};
</script>

<style>
.grid-item-content {
  background: #ccc;
  border: 1px solid #ddd;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

解释

• 监听触摸事件：在每个 GridItem 中监听 touchstart、touchmove 和 touchend 事件。
• 转换触摸事件为鼠标事件：在 convertTouchToMouse 方法中，将触摸事件转换为鼠标事件并重新触发。这使得 vue-grid-layout 可以响应触摸事件。