vue实现连线题

Vue 实现连线题的方法

使用 SVG 和动态数据绑定

在 Vue 中实现连线题可以通过 SVG 和动态数据绑定来实现。SVG 提供了绘制线条的功能，Vue 的数据绑定可以动态更新连线状态。

模板部分

<template>
  <div>
    <svg width="800" height="600">
      <!-- 连线题选项 -->
      <circle
        v-for="(item, index) in leftItems"
        :key="'left-' + index"
        :cx="item.x"
        :cy="item.y"
        r="20"
        fill="blue"
        @mousedown="startDrag(index, 'left')"
      />
      <circle
        v-for="(item, index) in rightItems"
        :key="'right-' + index"
        :cx="item.x"
        :cy="item.y"
        r="20"
        fill="red"
        @mousedown="startDrag(index, 'right')"
      />
      <!-- 连线 -->
      <line
        v-for="(line, index) in lines"
        :key="'line-' + index"
        :x1="line.x1"
        :y1="line.y1"
        :x2="line.x2"
        :y2="line.y2"
        stroke="black"
        stroke-width="2"
      />
    </svg>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      leftItems: [
        { x: 100, y: 100, text: 'A' },
        { x: 100, y: 200, text: 'B' },
      ],
      rightItems: [
        { x: 300, y: 100, text: '1' },
        { x: 300, y: 200, text: '2' },
      ],
      lines: [],
      dragging: null,
    };
  },
  methods: {
    startDrag(index, side) {
      this.dragging = { index, side };
    },
    handleMouseMove(event) {
      if (this.dragging) {
        const { index, side } = this.dragging;
        const item = side === 'left' ? this.leftItems[index] : this.rightItems[index];
        // 更新连线逻辑
      }
    },
    handleMouseUp(event) {
      if (this.dragging) {
        // 完成连线逻辑
        this.dragging = null;
      }
    },
  },
  mounted() {
    window.addEventListener('mousemove', this.handleMouseMove);
    window.addEventListener('mouseup', this.handleMouseUp);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.handleMouseMove);
    window.removeEventListener('mouseup', this.handleMouseUp);
  },
};
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如 jsplumb 或 leader-line。

安装 leader-line

npm install leader-line

使用示例

import LeaderLine from 'leader-line';

export default {
  mounted() {
    new LeaderLine(
      document.getElementById('left-item'),
      document.getElementById('right-item')
    );
  },
};

实现连线逻辑

连线题的核心逻辑是记录用户选择的起点和终点，并绘制连线。可以通过 Vue 的响应式数据来管理连线状态。

连线逻辑示例

methods: {
  connectItems(start, end) {
    this.lines.push({
      x1: start.x,
      y1: start.y,
      x2: end.x,
      y2: end.y,
    });
  },
  checkAnswer() {
    // 验证连线是否正确
  },
},

样式优化

为连线题添加样式和交互效果，提升用户体验。

CSS 示例

circle {
  cursor: pointer;
}
line {
  pointer-events: none;
}

注意事项

• 确保 SVG 的尺寸足够容纳所有选项和连线。
• 处理鼠标事件时注意性能，避免频繁重绘。
• 连线题的逻辑可以根据需求扩展，如限制连线数量、验证答案等。