安装依赖

LogicFlow官网

// 安装LogicFlow核心库
npm install @logicflow/core --save

//LogicFlow组件
npm install @logicflow/extension --save

入门案例

安装完成之后，在项目根目录下的src文件夹下的main.js中使用 import进行引用（相关css文件）

import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

开始使用
在页面中创建一个用于绘图的容器，可以是一个 div 标签。

  <!--操作面板--><div id="container" class="container" ></div>

准备数据

const data = {// 节点nodes: [{id: 50, // 节点idtype: 'rect', //节点类型：矩形x: 100, //x轴坐标y: 150, // y轴坐标text: '你好', //节点文本},{id: 21, // 节点idtype: 'circle', // 节点类型:圆形x: 300,y: 150,},],// 边edges: [{type: 'polyline',sourceNodeId: 50, //原始节点idtargetNodeId: 21, // 目标节点id},],
};

完整代码

<template><div class="wrapper"><div id="container" class="container"></div></div>
</template><script>
import {LogicFlow} from '@logicflow/core'
export default {name: 'HelloWorld',data () {return {}},mounted () {this.init()},methods: {// 流程图初始化init () {const data = {// 节点nodes: [{id: 50, // 节点idtype: 'rect', // 节点类型：矩形x: 100, // x轴坐标y: 150, // y轴坐标text: '你好' // 节点文本},{id: 21, // 节点idtype: 'circle', // 节点类型:圆形text: '第二',x: 300, // x轴坐标y: 150 // y轴坐标}],// 边edges: [{type: 'line', // 内置连线方式：直线(line);直角折线(polyline);贝塞尔曲线(bezier)sourceNodeId: 50, // 原始节点idtargetNodeId: 21 // 目标节点id}]}// 初始化配置const lf = new LogicFlow({container: document.querySelector('#container'), // 容器// 画布配置// width: window.innerWidth, // 宽度height: window.innerHeight, // 高度background: {color: '#2b364a' // 背景颜色},grid: {type: 'mesh',size: 20},isSilentMode: true // 仅仅可以浏览，不可进行节点和文本编辑})// 开始渲染lf.render(data)}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.wrapper{position: relative;overflow: auto;}.container{width: 100%;height: 100vh;outline: none;}
</style>

页面效果截图

实际运用案例

下载地址
下载成功之后，在项目根目录下打开cmd命令窗口，执行npm install ，然后执行npm run dev,项目就运行起来了

LogicFlow从新手到入门相关推荐

计算机入门新人必学,异世修真人怎么玩？新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
python新手项目-推荐：一个适合于Python新手的入门练手项目
原标题:推荐:一个适合于Python新手的入门练手项目随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人 ...
python经典好书-新手Python入门经典书籍推荐
随着人工智能和大数据时代的来临,开始学习Python的朋友是越来越多了.近来就连房地产大亨潘石屹也在微博上表示,自己开始学Python了.确实在当下,无论是不是做程序员,还是在各个行业像是数据分析.运 ...
前端怎么使用jsessionid_成都Web前端是干什么的？新手怎么入门
Web前端是干什么的?新手怎么入门?这是很多人都会思考的问题,在这个IT行业盛行的时代,你还不知道Web前端是干什么的?那你就OUT了,其实在我们生活中,随处可见都都Web前端的产物. 成都Web前端 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
Python新手基础入门教程：如何像面试官展示你的coding能力
Python新手基础入门教程:如何像面试官展示你的coding能力作为程序员,我们通常在面试的时候面试官会出一些题来让你解决,作为优秀的程秀员,除了需要具备解决问题的思路以外,代码的质量也很关键.因 ...
3DMax”——新手小白入门篇
3Dmax 是一个数字化三维制作软件,常简称为3Ds Max或MAX,是Discreet公司开发的(后被Autodesk公司合并)基于PC系统的三维动画渲染和制作软件.其前身是基于DOS操作系统的3D ...
java神奇蜘蛛侠攻略_神奇蜘蛛侠攻略带领新手快速入门
神奇蜘蛛侠攻略带领新手快速入门,蜘蛛侠是多少人心中的英雄,我们也可以在游戏中当回蜘蛛侠的,这款冒险游戏带你经历一场刺激的旅程,下面就是神奇蜘蛛侠攻略,带领新手们快速的入门. 第一章教学关,没有什么难 ...

LogicFlow从新手到入门

LogicFlow从新手到入门

安装依赖

入门案例

准备数据

实际运用案例

LogicFlow从新手到入门相关推荐

最新文章

热门文章