撤銷重作

<template>
  <div class="box">
    <div class="header">
      <button @click="handleHistoryBack">撤銷</button>
      <button @click="handleHistoryAhead">前進</button>
      <button @click="handleRecover">復原</button>
    </div>
    <div class="main">
      <button
        v-for="(item, index) in list"
        :key="item.id"
        :class="{ active: index === listIndex }"
        @click="handItem(item, index)"
      >
        {{ item }}
      </button>
    </div>
    <div>
      <p>historyIndex:{{ historyIndex }}</p>
      <p>curHistoryIndex:{{ curHistoryIndex }}</p>
      <p>backStep:{{ backStep }}</p>
      <p>--------</p>
      <p>historyIndexList:{{ historyIndexList }}</p>
      <p>historyActiveList:{{ historyActiveList }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['a', 'b', 'c', 'd', 'e'],
      listIndex: 0,
      listActive: {},
      historyIndexList: [],
      historyActiveList: [],
      historyIndex: 0,
      curHistoryIndex: 0,
      backStep: 0
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.listIndex = 0
      this.listActive = this.list[this.listIndex]
      this.setHistory()
    },
    handItem (item, index) {
      if (this.listIndex === index) {
        return false
      }
      this.listActive = item
      this.listIndex = index
      this.setHistory()
    },
    setHistory () {
      if (this.backStep > 0) {
        const spliceIndex = this.historyIndexList.length - this.backStep
        this.historyIndexList.splice(spliceIndex)
        this.historyActiveList.splice(spliceIndex)
        this.backStep = 0
        this.historyIndex = this.curHistoryIndex
      }
      this.historyIndexList.push(this.listIndex)
      this.historyActiveList.push(this.listActive)
      this.historyIndex++
      this.curHistoryIndex++
    },
    setData () {
      this.listIndex = this.historyIndexList[this.curHistoryIndex - 1]
      this.listActive = this.historyActiveList[this.curHistoryIndex - 1]
    },
    handleHistoryBack () {
      if (this.curHistoryIndex <= 1) {
        this.curHistoryIndex = 1
        alert('不能再後退')
        return false
      } else {
        this.curHistoryIndex--
      }
      if (this.backStep >= this.historyIndex) {
        this.backStep = this.historyIndex
      } else {
        this.backStep++
      }
      this.setData()
    },
    handleHistoryAhead () {
      if (this.curHistoryIndex >= this.historyIndex) {
        this.curHistoryIndex = this.historyIndex
        alert('不能再前進')
        return false
      } else {
        this.curHistoryIndex++
      }
      if (this.backStep <= 0) {
        this.backStep = 0
      } else {
        this.backStep--
      }
      this.setData()
    },
    handleRecover () {
      this.backStep = 0
      this.historyIndexList = []
      this.historyActiveList = []
      this.historyIndex = 0
      this.curHistoryIndex = 0
      this.initData()
    }
  }
}
</script>
<style scoped lang="less">
button {
  width: 100px;
  height: 40px;
  cursor: pointer;
  &.active {
    color: red;
  }
}
</style>