Recently, I was working on a project similar to Xmind, which needed flow chart components. I found an open source and easy to use framework goJS, but there was very little information on the Internet, and the website was all In English, which was not conducive to the majority of netizens to read. The following is attached with my own little experience, a demo for beginners, hoping to help you ~~~~

1. Reference dom-Tree as a component in the VUE project

<tree-diagram ref="diag"
              v-bind:model-data="diagramData"
              v-on:model-changed="modelChanged"
              v-on:changed-selection="changedSelection"
              ></tree-diagram>
Copy the code

2. Write the following code in the vUE extracted component

<template> <div style="display: flex; align-items: flex-start"> <span id="diagramSpan" style="display: inline-block; vertical-align: top; flex:auto;" > <div id="myDiagramDiv" class="hidden-div" style="width:100%; height:648px ; overflow:hidden"></div> </span> </div> </template>Copy the code

Initialize gojs in script, define template, define node node and link line

<script> import go from 'gojs'; let $ = go.GraphObject.make; export default { name: "diagram", props: ["modelData"], data() { return { myDiagram: {}, } }, watch: { modelData: function (val) { this.updateModel(val); } }, methods: { model() { return this.diagram.model; }, updateModel(val) { if (val instanceof go.Model) { this.diagram.model = val; } else { var m = new go.GraphLinksModel(); if (val) { for (var p in val) { m[p] = val[p]; } } this.diagram.model = m; } }, init() { var self = this; This. myDiagram = $(go.Diagram, "myDiagramDiv", {initialContentAlignment: go.spot.left, // Display layout in center: $(go.ForceDirectedLayout), layout: $(go.TreeLayout, { angle: 0, layerSpacing: 35, arrangement: Go. TreeLayout. ArrangementHorizontal}), / / Angle 0 transverse view 90 longitudinal view "undoManager. IsEnabled" : false, / / banned the undo and redo scale: 1.0, // Initial view size scale minScale: 1.0, // Minimum view zoom scale maxScale: 1.0, // Maximum view zoom scale allowZoom: true, // Whether canvas can be zoomed is temporarily not allowMove: False, // forbid moving nodes}); . / / this. Define Node myDiagram nodeTemplate = $(go) Node, "Horizontal", $(go. A Panel, "Auto", $(go. Shape, "RoundedRectangle", { fill: "white", strokeWidth: 0, }, new go.Binding("fill", "level", function (h) { return colors[h] ? colors[h] : h; TextBlock, {font: "Normal 14px Helvetica, bold Arial, sans-serif", stroke: $(go.TextBlock, {font:" Normal 14px Helvetica, bold Arial, sans-serif", stroke: "white", margin: 3, width: 150 }, new go.Binding("text", "text", ), new go.Binding("name", "name", ), ), ), { selectionAdornmentTemplate: $(go.Adornment, "Auto", $(go.Shape, { fill: null, stroke: "#00fff5", strokeWidth: $(go.placeholder),),}, $("TreeExpanderButton", {margin: 4, "ButtonBorder. Fill ": "#fff", "ButtonBorder.stroke": "#fff", width: 11, height: New go.binding ("isTreeExpanded", "isExpanded"),); / / define a right route in the form of attachment template enclosing myDiagram. LinkTemplate = $(go) Link, {routing: go. Link. Orthogonal, corner: 5}, / / lines radian $(go) Shape, {stroke: "# C8C8C8 strokeDashArray: [1, 2]}), / / dotted line spacing); this.myDiagram.addDiagramListener("SelectionDeleting", function (e) { e.cancel = true; }); this.diagram = this.myDiagram; this.updateModel(this.modelData); let myOverview = $(go.Overview, "myOverviewDiv", {observed: this.myDiagram}); }, }, mounted() { this.init(); }, } </script>Copy the code

4. Reference styles

<style scoped>
    #mySpinner {
        display: none;
        position: absolute;
        z-index: 100;
        animation: spin 1s linear infinite;
    }

</style>
Copy the code