gojs在vue中实现画布流程

原创

已于 2024-04-22 21:13:37 修改 · 2k 阅读

标签

#vue.js #javascript #前端

于 2022-09-23 00:43:54 首次发布

本文介绍了如何在Vue项目中使用GoJS库创建交互式图表，包括安装步骤、组件引入、div元素布局、样式和行为设定，以及关键代码片段。重点展示了如何定义节点类型和调用外部对象的处理。

GoJS 是一个用于实现交互式图表的 JavaScript 库，详情可查看官网

根据官网samples实现以下demo
在这里插入图片描述

1.安装gojs插件

npm install gojs --save
或者yarn add gojs

2.在vue组件中引入

import go from "gojs";
const $ = go.GraphObject.make;
const palettes={
   
   
     palette0: [
        {
   
    palette: "0", type: "start", text: "开始", nyColor: null, from: true },
        {
   
    palette: "0", type: "stop", text: "结束", nyColor: null, to: true },
        {
   
   
            palette: "0",
            type: "type1",
            text: "demo1",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },
        {
   
   
            palette: "0",
            type: "type2",
            text: "demo2",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },
    ],
    palette1: [
        {
   
   
            palette: "1",
            type: "type3",
            text: "demo3",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },
          {
   
   
            palette: "1",
            type: "type4",
            text: "demo4",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
          },
        {
   
   
            palette: "1",
            type: "type5",
            text: "demo5",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },   
    ],
}
let diagram = null;

3.创建div标签元素

<div class="content">
   <div class="left">
      <div id="palette0" class="palette"></div>
      <div id="palette1" class="palette"></div>
   </div>
   <div class="right">
      <div id="diagram" :style="{ height:  'calc(100vh - 305px)' }"></div>
   </div>
</div>

样式部分

.content{
   
   
   display:flex;
   .left{
   
   
      width:300px;
      .palette {
   
   
        width: 100%;
        height: 150px;
      }
   }
   .right{
   
   
      flex:1
   }
}

4.行为部分（script）

data() {
   
   
    return {
   
   
      nodesData: {
   
   },
      isReadOnly: false,
    };
},
mounted() {
   
   
    that = this;
    diagram = this.createDiagram();
    //   diagram.model = go.Model.fromJson({});
    diagram.commandHandler.canDeleteSelection = function

最低0.47元/天解锁文章