1、效果

2、vue3 demo

<template>
  <div class="x6-graph-wrap">
    <h1>Default Settings</h1>
    <div class="x6-graph-tools">
      <a-button-group>
        <a-button @click="onUndo" :disabled="!canUndo" >
          Undo 撤消
        </a-button>
        <a-button @click="onRedo" :disabled="!canRedo">
          Redo 还原
        </a-button>
      </a-button-group>
    </div>
    <div ref="container" class="x6-graph" />
  </div>
</template>

<script lang="ts">
import { Graph } from '@antv/x6'
import { defineComponent, ref} from 'vue' // reactive

export default defineComponent({
  name: "index",
  setup() {
    const canUndo = ref(true)
    const canRedo = ref(false)
    // eslint-disable-next-line
    const history = ref(undefined as any)

    const init: (any) => void =(that)=>{
      const graph = new Graph({
        container: (that.$refs.container) as HTMLDivElement,
        width: 800,
        height: 600,
        grid: true,
        history: true,
      })
      history.value = graph.history

      graph.history.on('change', () => {
        canUndo.value = graph.history.canUndo()
        canRedo.value = graph.history.canRedo()
      })

      const source = graph.addNode({
        x: 120,
        y: 120,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'Hello',
          },
          body: {
            strokeWidth: 1,
          },
        },
      })

      const target = graph.addNode({
        x: 300,
        y: 320,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'World',
          },
          body: {
            strokeWidth: 1,
          },
        },
      })

      graph.addEdge({ source, target, arrts: { line: { strokeWidth: 1 } } })
    }

    const onUndo: () => void = ()=> {
      history.value.undo()
    }
    const onRedo: () => void =()=> {
      history.value.redo()
    }

    return {
      canUndo,
      canRedo,
      history,
      init,
      onUndo,
      onRedo
    }
  },
  mounted()  {
    /* eslint-disable */
    const that = this as any
    this.$nextTick(function () {
      that.init(that)
    })
  },
})
</script>

<style scoped>

</style>

3、码云地址

地址：https://gitee.com/icefox1/x6-vue-demo

位置：x6-features/src/views/undo