80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<ul>
|
|
<li v-for="(point, index) in points" :key="index">
|
|
点位 {{ index + 1 }}: ({{ point.x }}, {{ point.y }})
|
|
<button @click="movePoint(index)">移动</button>
|
|
<button @click="deletePoint(index)">删除</button>
|
|
</li>
|
|
</ul>
|
|
<button @click="addPoint">新增点位</button>
|
|
<button @click="undo" :disabled="historyIndex === 0">撤回</button>
|
|
<button @click="redo" :disabled="historyIndex === history.length - 1">重做</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
|
|
// 初始化点位数据
|
|
const points = reactive([
|
|
{ x: 10, y: 20 },
|
|
{ x: 30, y: 40 }
|
|
])
|
|
|
|
// 操作历史记录
|
|
const history = reactive([[...points]])
|
|
// 历史记录指针
|
|
const historyIndex = ref(0)
|
|
|
|
// 新增点位方法
|
|
const addPoint = () => {
|
|
const newPoint = { x: Math.random() * 100, y: Math.random() * 100 }
|
|
points.push(newPoint)
|
|
updateHistory()
|
|
}
|
|
|
|
// 移动点位方法
|
|
const movePoint = (index) => {
|
|
points[index].x = Math.random() * 100
|
|
points[index].y = Math.random() * 100
|
|
updateHistory()
|
|
}
|
|
|
|
// 删除点位方法
|
|
const deletePoint = (index) => {
|
|
points.splice(index, 1)
|
|
updateHistory()
|
|
}
|
|
|
|
// 更新历史记录
|
|
const updateHistory = () => {
|
|
// 如果已经进行了撤回操作，移除撤回之后的历史记录
|
|
if (historyIndex.value < history.length - 1) {
|
|
history.splice(historyIndex.value + 1)
|
|
}
|
|
// 保存当前状态到历史记录
|
|
history.push([...points])
|
|
// 更新历史记录指针
|
|
historyIndex.value++
|
|
}
|
|
|
|
// 撤回操作
|
|
const undo = () => {
|
|
if (historyIndex.value > 0) {
|
|
historyIndex.value--
|
|
// 恢复到上一个状态
|
|
points.splice(0, points.length, ...history[historyIndex.value])
|
|
}
|
|
}
|
|
|
|
// 重做操作
|
|
const redo = () => {
|
|
if (historyIndex.value < history.length - 1) {
|
|
historyIndex.value++
|
|
// 恢复到下一个状态
|
|
points.splice(0, points.length, ...history[historyIndex.value])
|
|
}
|
|
}
|
|
</script>
|