当前位置：首页 > VUE

vue实现撤回重做

2026-02-17 23:44:58VUE

Vue 实现撤回重做功能

撤回重做功能通常通过维护一个操作历史栈来实现。Vue 中可以利用响应式数据和数组操作来实现这一功能。

核心思路

使用两个栈结构分别存储操作历史（undoStack）和重做历史（redoStack）
每次用户操作时将操作信息和反向操作压入undoStack
执行撤回时从undoStack弹出并执行反向操作，同时将该操作压入redoStack
执行重做时从redoStack弹出并执行操作，同时将该操作的反向操作压入undoStack

基本实现代码

// 在Vue组件中
data() {
  return {
    undoStack: [],
    redoStack: [],
    maxStackSize: 100 // 限制历史记录最大数量
  }
},
methods: {
  // 记录操作
  recordAction(doAction, undoAction) {
    this.undoStack.push({ do: doAction, undo: undoAction })
    this.redoStack = [] // 新操作时清空重做栈
    if (this.undoStack.length > this.maxStackSize) {
      this.undoStack.shift()
    }
  },

  // 撤回操作
  undo() {
    if (this.undoStack.length === 0) return
    const action = this.undoStack.pop()
    action.undo()
    this.redoStack.push(action)
  },

  // 重做操作
  redo() {
    if (this.redoStack.length === 0) return
    const action = this.redoStack.pop()
    action.do()
    this.undoStack.push(action)
  }
}

实际应用示例

假设有一个文本编辑器组件：

vue实现撤回重做

// 模板部分
<template>
  <div>
    <textarea v-model="content"></textarea>
    <button @click="handleChange('add text')">修改内容</button>
    <button @click="undo" :disabled="!canUndo">撤回</button>
    <button @click="redo" :disabled="!canRedo">重做</button>
  </div>
</template>

// 脚本部分
<script>
export default {
  data() {
    return {
      content: '',
      undoStack: [],
      redoStack: [],
      maxStackSize: 50
    }
  },
  computed: {
    canUndo() {
      return this.undoStack.length > 0
    },
    canRedo() {
      return this.redoStack.length > 0
    }
  },
  methods: {
    recordAction(doAction, undoAction) {
      this.undoStack.push({ do: doAction, undo: undoAction })
      this.redoStack = []
      if (this.undoStack.length > this.maxStackSize) {
        this.undoStack.shift()
      }
    },
    undo() {
      if (this.undoStack.length === 0) return
      const action = this.undoStack.pop()
      action.undo()
      this.redoStack.push(action)
    },
    redo() {
      if (this.redoStack.length === 0) return
      const action = this.redoStack.pop()
      action.do()
      this.undoStack.push(action)
    },
    handleChange(newText) {
      const oldContent = this.content
      const newContent = oldContent + '\n' + newText

      this.recordAction(
        () => { this.content = newContent }, // 执行操作
        () => { this.content = oldContent }  // 撤回操作
      )

      this.content = newContent
    }
  }
}
</script>