vue-super-flow流程图方向控制

在 Vue Super Flow 中，流程图的方向控制可以通过指定节点之间的连接来实现。每个节点可以有多个出口，每个出口都可以指向其他节点，从而定义了流程图的方向。

你可以在节点上使用 `v-on` 或 `@` 指令来监听事件，并在事件处理函数中使用 `this.next()` 方法来指定下一个节点。例如，你可以在一个按钮节点上监听点击事件，然后在点击事件处理函数中调用 `this.next('nextNode')` 来跳转到下一个节点。

另外，你还可以在节点上使用 `v-if` 或 `v-show` 来控制节点的显示和隐藏，从而实现根据条件进行流程控制。

下面是一个简单的示例：

<template>
  <div>
    <button @click="goNext">下一步</button>
    
    <div v-if="currentNode === 'node1'">
      <!-- 节点1的内容 -->
    </div>
    
    <div v-if="currentNode === 'node2'">
      <!-- 节点2的内容 -->
    </div>
    
    <div v-if="currentNode === 'node3'">
      <!-- 节点3的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNode: 'node1' // 当前节点
    };
  },
  methods: {
    goNext() {
      if (this.currentNode === 'node1') {
        this.currentNode = 'node2'; // 跳转到节点2
      } else if (this.currentNode === 'node2') {
        this.currentNode = 'node3'; // 跳转到节点3
      }
    }
  }
};
</script>

在上面的示例中，点击按钮会触发 `goNext` 方法，根据当前节点的值来决定跳转到下一个节点。你可以根据实际需求进行更复杂的流程控制。