検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Vue を使用してフローチャートを作成するにはどうすればよいですか?

Vue を使用してフローチャートを作成するにはどうすればよいですか?

WBOY
WBOYオリジナル
2023-06-25 09:16:433948ブラウズ

インターネットの発展に伴い、業務フローチャートや回路図などのフローチャートの作成が必要なアプリケーションが増えています。 Vue.js は非常に人気のあるフロントエンド フレームワークであり、優れた対話性と保守性を提供するため、複雑なフローチャート アプリケーションを構築するために広く使用されています。

この記事では、Vue を使用してフローチャート作成を実装する方法を紹介します。これには次の手順が含まれます。

  1. 必要な依存関係をインストールする
  2. 基本的なコンポーネント構造を作成する
  3. ドラッグ アンド ドロップ機能の実装
    4. #接続線の実装
  4. #ノード編集の実装
    5. #エクスポート フローチャート
  5. ##必要な依存関係のインストール
  6. まず、vue-draggable-resizable ライブラリをインストールする必要があります。これは、要素のドラッグとスケーリング機能を実現できる非常に使いやすい Vue プラグインです。 npm を使用してインストールできます。 
  7. npm install vue-draggable-resizable --save
基本的なコンポーネント構造を作成します

    フローチャートを編集するには、Vue コンポーネントを使用する必要があります。すべてのフローチャート要素を含む FlowChart コンポーネントを作成する必要があります。各ノードは、フローチャートのステップを表すノード コンポーネントです。接続線は、さまざまなノードを接続するために使用される接続コンポーネントです。
  1. まず、FlowChart.vue ファイル内に抽象 FlowChart コンポーネントを作成して、すべてのノードと接続線を含める必要があります。 
<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 组件插槽，用于插入节点 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 组件插槽，用于插入连接线 -->
      <slot name="connections"></slot>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'FlowChart'
}
</script>

FlowChart コンポーネント内のノードと接続線をそれぞれ次のように配置します。 2つのスロット。

次に、フローチャートのノードと接続線を表すノード コンポーネントと接続コンポーネントを作成する必要があります。

Node.vue: 

<template>
  <draggable-resizable :w="width" :h="height" :x="x" :y="y">
    <div class="node">
      <!-- 节点的内容 -->
      <div class="node-content">
        <slot></slot>
      </div>
    </div>
  </draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  name: 'Node',
  components: {
    VueDraggableResizable
  },
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 50
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  }
}
</script>

Connection.vue:

<template>
  <svg class="connection">
    <!-- SVG 路径元素，用于绘制连接线 -->
    <path :d="path"></path>
  </svg>
</template>

<script>
export default {
  name: 'Connection',
  props: {
    start: Object,
    end: Object
  },
  computed: {
    path () {
      // 计算连接线的路径
      const startX = this.start.x + this.start.width / 2
      const startY = this.start.y + this.start.height / 2
      const endX = this.end.x + this.end.width / 2
      const endY = this.end.y + this.end.height / 2
      return `M ${startX} ${startY} L ${endX} ${endY}`
    }
  }
}
</script>

vue-draggable-resizable コンポーネントを使用してノードのドラッグとスケーリングを実装します。ノードの幅、高さ、x、y、およびその他の属性を渡す必要があります。接続線は SVG パス要素を使用して描画され、パスはノードの位置とサイズに基づいて計算する必要があります。

ドラッグ アンド ドロップ機能の実装

    ノードのドラッグ アンド ドロップ機能を実現するには、 v-on:drag, v-on を追加する必要があります。 Node コンポーネントの -on:resize イベント リスナーの :dragstop および v。これらはそれぞれ、ノードのドラッグ、ドラッグ終了、サイズ変更に対応します。 
  1. <draggable-resizable
  :w="width"
  :h="height"
  :x="x"
  :y="y"
  v-on:drag="onDrag"
  v-on:dragstop="onDragStop"
  v-on:resize="onResize"
>
  <!-- 节点的内容 -->
</draggable-resizable>

<script>
export default {
  name: 'Node',
  methods: {
    onDrag (pos) {
      // 拖拽事件处理函数
      this.$emit('move', {
        x: pos.x,
        y: pos.y
      })
    },
    onDragStop (pos) {
      // 结束拖拽事件处理函数
      this.$emit('endMove', {
        x: pos.x,
        y: pos.y
      })
    },
    onResize (size) {
      // 调整大小事件处理函数
      this.$emit('resize', {
        width: size.width,
        height: size.height
      })
    }
  }
}
</script>
    2. これらのイベント処理関数の $emit メソッドを介してイベントを親コンポーネントに送信し、ノードの位置とノードのリアルタイム更新を実現します。サイズ。 FlowChart コンポーネントでは、これらのイベントをリッスンしてノード情報を更新する必要があります: 
<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 将节点插入到插槽中 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 将连接线插入到插槽中 -->
      <slot name="connections"></slot>
      <!-- 鼠标跟随的连接线 -->
      <Connection v-if="showConnection"
                  :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                  :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
    </svg>
  </div>
</template>

<script>
import Node from './Node.vue'
import Connection from './Connection.vue'

export default {
  name: 'FlowChart',
  components: {
    Node,
    Connection
  },
  data () {
    return {
      showConnection: false,
      start: null, // 起点节点
      end: null // 终点节点
    }
  },
  methods: {
    onNodeMove (node, pos) {
      // 节点拖拽时的事件处理函数
      node.x = pos.x
      node.y = pos.y
    },
    onNodeEndMove (node, pos) {
      // 节点结束拖拽时的事件处理函数
      node.x = pos.x
      node.y = pos.y
      this.showConnection = false
      this.start = null
      this.end = null
    },
    onNodeResize (node, size) {
      // 节点调整大小时的事件处理函数
      node.width = size.width
      node.height = size.height
    },
    connectNodes (start, end) {
      // 连接两个节点
      this.showConnection = true
      this.start = start
      this.end = end
    }
  }
}
</script>

ノードのドラッグ、ドラッグ終了、調整に応答するために、onNodeMove、onNodeEndMove、onNodeResize の 3 つのイベント処理関数を定義しました。 。 サイズ。 connectNodes 関数は 2 つのノードを接続するために使用されます。

接続線の実装

    FlowChart コンポーネントで、showConnection 変数と 2 つの変数 start と end を定義して、接続線の情報を保存します。接続線を描画するには、マウス イベントを通じてこの情報を更新する必要があります。
  1. まず、v-on:mousedown イベントと v-on:mouseup イベントのリッスンを Node コンポーネントに追加する必要があります。これらのイベントは、ユーザーがノードを選択したかどうかを検出するために使用されます。 
<draggable-resizable
  :w="width"
  :h="height"
  :x="x"
  :y="y"
  v-on:drag="onDrag"
  v-on:dragstop="onDragStop"
  v-on:resize="onResize"
  v-on:mousedown="onMouseDown"
  v-on:mouseup="onMouseUp"
>
  <!-- 节点的内容 -->
</draggable-resizable>

<script>
export default {
  name: 'Node',
  methods: {
    ...
    onMouseDown () {
      // 鼠标按下时选中当前节点
      this.$emit('select', this)
    },
    onMouseUp () {
      // 鼠标松开时取消选中
      this.$emit('unselect')
    }
  }
}
</script>

onMouseDown イベント ハンドラー関数で親コンポーネントに select イベントを送信し、現在のノードを選択します。 FlowChart コンポーネントでは、次のイベントをリッスンする必要があります: 

<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 将节点插入到插槽中 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 将连接线插入到插槽中 -->
      <slot name="connections"></slot>
      <!-- 鼠标跟随的连接线 -->
      <Connection v-if="showConnection"
                  :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                  :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
    </svg>
  </div>
</template>

<script>
import Node from './Node.vue'
import Connection from './Connection.vue'

export default {
  name: 'FlowChart',
  components: {
    Node,
    Connection
  },
  data () {
    return {
      showConnection: false,
      start: null, // 起点节点
      end: null // 终点节点
    }
  },
  methods: {
    ...
    onSelectNode (node) {
      // 选中节点时的事件处理函数
      if (this.start) {
        // 已选择起点，连接当前节点
        this.end = node
        this.connectNodes(this.start, this.end)
      } else {
        // 选择起点
        this.start = node
      }
    },
    onUnselectNode () {
      // 取消选中节点时的事件处理函数
      this.start = null
      this.end = null
      this.showConnection = false
    }
  }
}
</script>

onSelectNode イベント ハンドラー関数で開始点ノードが現在選択されているかどうかを判断し、選択されている場合は現在のノードを接続します。そうでない場合は、現在のノードを開始点として使用します。 onUnselectNode イベント ハンドラーで、ノードの選択を解除し、接続線情報をリセットします。

ノード編集の実装

    ノード編集を実装するには、Node.vue に編集ボタンを追加し、そのクリック イベントをリッスンする必要があります: 
  1. <template>
  <draggable-resizable ...>
    <div class="node">
      <div class="node-content" v-on:click="$emit('edit')">
        <!-- 节点的内容 -->
      </div>
      <button class="edit-button" v-on:click="$emit('edit')">
        编辑
      </button>
    </div>
  </draggable-resizable>
</template>

<script>
export default {
  name: 'Node'
}
</script>

<style>
.edit-button {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
</style>
    2. 次に、FlowChart.vue で編集イベントをリッスンし、選択したノードに入力ボックスを表示します。 
<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 将节点插入到插槽中 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 将连接线插入到插槽中 -->
      <slot name="connections"></slot>
      <!-- 鼠标跟随的连接线 -->
      <Connection v-if="showConnection"
                  :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                  :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
    </svg>

    <!-- 编辑区域 -->
    <div class="edit-panel" v-if="selectedNode">
      <h3>编辑节点</h3>
      <form v-on:submit.prevent="saveNode">
        <label for="node-label">节点名称</label>
        <input id="node-label" type="text" v-model="nodeLabel">
        <button type="submit">保存</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlowChart',
  data () {
    return {
      showConnection: false,
      start: null, // 起点节点
      end: null, // 终点节点
      selectedNode: null, // 选中的节点
      nodeLabel: '' // 当前节点的标签
    }
  },
  methods: {
    ...
    onSelectNode (node) {
      // 选中节点时的事件处理函数
      if (this.start) {
        // 已选择起点，连接当前节点
        this.end = node
        this.connectNodes(this.start, this.end)
        this.selectedNode = null
      } else {
        // 选择起点
        this.start = node
      }
    },
    onUnselectNode () {
      // 取消选中节点时的事件处理函数
      this.start = null
      this.end = null
      this.showConnection = false
      this.selectedNode = null
    },
    onEditNode (node) {
      // 编辑节点时的事件处理函数
      this.selectedNode = node
      this.nodeLabel = node.$slots.default[0].text.trim()
    },
    saveNode () {
      // 保存节点编辑后的信息
      this.selectedNode.$slots.default[0].text = this.nodeLabel
      this.selectedNode = null
    }
  }
}
</script>

<style>
.edit-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-shadow: -1px 0 10px rgba(0, 0, 0, 0.3);
}
</style>

onSelectNode イベント ハンドラー関数に this.selectedNode = null を追加して、ノードの編集ボックスを非表示にします。 。 onEditNode イベント ハンドラーでは、編集イベントを親コンポーネントに送信して、選択したノードを編集するための入力ボックスを表示します。編集したノードの情報をsaveNodeイベントハンドラ関数で保存します。

フローチャートのエクスポート

    最後に、FlowChart.vue にエクスポート ボタンを追加して、現在のフローチャートを JSON 形式にエクスポートできます: 
  1. <template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 将节点插入到插槽中 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 将连接线插入到插槽中 -->
      <slot name="connections"></slot>
      <!-- 鼠标跟随的连接线 -->
      <Connection v-if="showConnection"
                  :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                  :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
    </svg>

    <!-- 编辑区域 -->
    ...

    <!-- 导出按钮 -->
    <button class="export-button" v-on:click="exportFlowchart">导出</button>
  </div>
</template>

<script>
export default {
  name: 'FlowChart',
  methods: {
    ...
    exportFlowchart () {
      // 导出流程图
      const nodes = []
      const connections = []
      this.$slots.nodes.forEach(vnode => {
        const node = vnode.componentInstance
        nodes.push({
          x: node.x,
          y: node.y,
          width: node.width,
          height: node.height,
          label: node.$slots.default[0].text.trim()
        })
      })

以上がVue を使用してフローチャートを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Vue を使用して Suning.com を模倣したページ デザインを実装するにはどうすればよいですか?次の記事：Vue を使用して Suning.com を模倣したページ デザインを実装するにはどうすればよいですか?

関連記事

続きを見る