gojs与vue 怎么实现treeDom 亲测有效

最近在做一个xmind类似的项目，需要用到流程图组件，发现了一款开源好用的框架gojs，但是网上资料很少，全英文网站，不利于广大网友阅读，下面附上自己小小经验，给初学者一个demo，希望能够帮助大家~~~~

1、将dom-tree作为组件引用到vue项目中去

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

2、在vue抽取的组件中编写以下代码

<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>

3、在script中初始化gojs，定义模板，定义node节点和link线条

<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, // 居中显示 layout: $(go.ForceDirectedLayout),
                            layout: $(go.TreeLayout, {
                                angle: 0,
                                layerSpacing: 35,
                                arrangement: go.TreeLayout.ArrangementHorizontal
                            }), // angle 0 横向展示视图  90纵向展示视图
                            "undoManager.isEnabled": false, //禁止撤销和重做
                            scale: 1.0,    //初始视图大小比例
                            minScale: 1.0, //最小视图的缩小比例
                            maxScale: 1.0, //最大视图的放大比例
                            allowZoom: true, //画布是否可以缩放 暂时没有用
                            allowMove: false, //禁止移动节点            
                        });

                //定义节点
                this.myDiagram.nodeTemplate =
                    $(go.Node, "Horizontal",
                        $(go.Panel, "Auto",
                            $(go.Shape,
                                "RoundedRectangle", {
                                    fill: "white",
                                    strokeWidth: 0,
                                },
                                new go.Binding("fill", "level", function (h) {
                                    return colors[h] ? colors[h] : h;
                                })
                            ),
                          
                            //节点里面内容的属性 字体颜色
                            $(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: 3, //选中的边框宽度为0
                                        }
                                    ),
                                    $(go.Placeholder),
                                ),
                        },
                        $("TreeExpanderButton", {
                            margin: 4,
                            "ButtonBorder.fill": "#fff",
                            "ButtonBorder.stroke": "#fff",
                            width: 11,
                            height: 11
                        },),
                        //节点是否展开属性，在数据层绑定这个属性
                        new go.Binding("isTreeExpanded", "isExpanded"),
                    );



                //定义一个直角路由形式的连线模板
                this.myDiagram.linkTemplate =
                    $(go.Link, {routing: go.Link.Orthogonal, corner: 5}, //线条的弧度
                        $(go.Shape, {stroke: "#C8C8C8", strokeDashArray: [1, 2]}), //虚线间隔
                    );


                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>

4、引用样式

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

</style>