Vue可视化拖拽流程框架|极客教程

Vue可视化拖拽流程框架

在现代的Web应用程序中，可视化拖拽流程框架成为越来越受欢迎的功能要求。用户可以通过拖动不同的元素来构建自己的流程图，从而快速创建复杂的业务流程或者工作流程。Vue.js作为当前流行的前端框架之一，提供了丰富的生态系统和灵活的组件，可以很好地支持可视化拖拽流程框架的开发。

本文将详细介绍如何使用Vue.js来构建一个简单的可视化拖拽流程框架，并演示如何实现拖拽节点、连接节点、删除节点等功能。

准备工作

在开始之前，我们需要确保已经安装了Vue CLI，并创建一个新的Vue项目。可以执行以下命令来创建一个新的项目：

vue create drag-drop-flow

安装完成后，进入项目目录并启动开发服务器：

cd drag-drop-flow
npm run serve

拖拽节点组件

首先，我们需要创建一个拖拽节点组件，用户可以拖动这个节点来创建流程图中的不同步骤。

<template>
  <div
    class="node"
    :style="{ top: position.y + 'px', left: position.x + 'px' }"
    @mousedown="startDrag"
  >
    封装的节点组件
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      position: { x: 0, y: 0 },
      offset: { x: 0, y: 0 }
    };
  },
  methods: {
    startDrag(event) {
      this.offset.x = event.clientX - this.position.x;
      this.offset.y = event.clientY - this.position.y;
      this.isDragging = true;

      document.addEventListener('mousemove', this.handleDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    handleDrag(event) {
      if (this.isDragging) {
        this.position.x = event.clientX - this.offset.x;
        this.position.y = event.clientY - this.offset.y;
      }
    },
    stopDrag() {
      this.isDragging = false;

      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
};
</script>

<style scoped>
.node {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  cursor: move;
}
</style>

在上面的代码中，我们创建了一个简单的节点组件，当用户按下鼠标左键在节点上拖动时，会实时更新节点的位置。用户可以自定义节点的样式，以及在鼠标释放后的处理逻辑。

连接线组件

接下来，我们需要创建一个连接线组件，用于连接不同的节点，形成流程图中的流程线。

<template>
  <svg class="line" :style="lineStyle">
    <path
      ref="path"
      stroke="#333"
      stroke-width="2"
      fill="none"
      :d="pathData"
    />
  </svg>
</template>

<script>
export default {
  props: {
    start: Object,
    end: Object
  },
  computed: {
    pathData() {
      const startX = this.start.x + 50;
      const startY = this.start.y + 25;
      const endX = this.end.x + 50;
      const endY = this.end.y + 25;

      return `M {startX}{startY} L {endX}{endY}`;
    },
    lineStyle() {
      return {
        zIndex: -1
      };
    }
  }
};
</script>

<style scoped>
.line {
  position: absolute;
}
</style>

在上面的代码中，我们定义了一个SVG元素，利用其path标签可以方便地绘制连接线。通过计算不同节点的位置，可实现两节点之间的连线效果。

主应用组件

最后，我们将创建一个主应用组件，将节点和连线组合在一起，并实现节点之间的拖拽连接和删除节点的功能。

<template>
  <div class="app" @mouseup="clearDrag">
    <draggable-node v-for="(node, index) in nodes" :key="index" @mousedown.native="selectNode(node)">
      {{ node.text }}
    </draggable-node>
    <connection-line v-for="(connection, index) in connections" :key="index" :start="connection.start" :end="connection.end" />
  </div>
</template>

<script>
import DraggableNode from './components/DraggableNode.vue';
import ConnectionLine from './components/ConnectionLine.vue';

export default {
  data() {
    return {
      nodes: [
        { text: 'Node 1', x: 100, y: 100 },
        { text: 'Node 2', x: 300, y: 100 },
        { text: 'Node 3', x: 200, y: 200 }
      ],
      connections: [],
      selectedNode: null
    };
  },
  components: {
    DraggableNode,
    ConnectionLine
  },
  methods: {
    selectNode(node) {
      this.selectedNode = node;
    },
    clearDrag() {
      this.selectedNode = null;
    }
  }
};
</script>

<style>
.app {
  position: relative;
  width: 100%;
  height: 500px;
}
</style>