vue-flowy前端流程图绘制工具

vue-flowy

 

翻译来源：https://gitee.com/yunwisdoms/vue-flowy

 

基于Vue的智能流程图创建。

适用于Vue 2。

 

安装

通过NPM安装

$ npm install vue-flowy -save

通过纱安装

$ yarn add vue-flowy

注册为组件

import {VueFlowy} from 'vue-flowy'

export default {
  name: 'App',

  components: {
    VueFlowy
  }
}

注册为插件

import Vue from 'vue'
import {VueFlowy} from 'vue-flowy'

Vue.component(VueFlowy)

用法

快速示例

在CodeSandbox上观看演示

<template>
  <VueFlowy :chart='chart'></VueFlowy>
</template>

<script>
import {VueFlowy, FlowChart} from 'vue-flowy'

export default {
  name: 'App',

  components: {
    VueFlowy
  },

  data: () => ({
    chart: new FlowChart()
  }),
  mounted() {
    const idea = this.chart.addElement('idea')
    const A = this.chart.addElement('A', {label: 'vscode'})
    const B = this.chart.addElement('B', {label: 'github'})
    const C = this.chart.addElement('C', {label: 'npm'})
    idea.leadsTo(A).leadsTo(B)
    A.leadsTo(C)

    A.on('click', function() {
      console.log('click!')
    })
  },
}
</script>

道具

道具	描述	需要	类型	默认
图表	图表数据（流程图类型）	真正	流程图	-

 

API

每个FlowChart都通过使用类创建一个新的FlowChart实例开始FlowChart：

 

流程图

data() {
  return {
    chart: new FlowChart()
  }
}

该创建当前允许以下选项：

选项	描述	类型	默认
方向	图表建立的方向。可以是LR，TB，BT，RL	串	LR

现在您可以使用新的图表变量

<FlowChart> .addElement（id，[options]）

用于向图表添加节点。每个节点都需要一个ID，因此此字段为必填字段。 返回类FlowElement

可用的选项有：

选项	描述	类型	默认
标签	显示在节点上的标签	串	ID

 

流元素

FlowElement由<FlowChart> .addElement返回。它代表一个节点

<FlowElement>.leadsTo(<FlowElement>, [options])

用于将两个元素与边连接。

可用的选项有：

选项	描述	类型	默认
标签	出现在边缘的标签	串	''

<FlowElement>.on(event, callback)

<FlowElement>.on(事件,回调)

用于将事件添加到FlowElements。可以是任何事件。

 

执照

Vue-Flowy是根据MIT许可获得许可的开源软件

 

贡献

由于时间有限，如果有人为这个项目做贡献，我会很高兴。只需克隆存储库即可开始开发。最后运行yarn build构建程序包以对其进行测试。

然后使用yarn link vue 链接该包。由于vue是对等依赖项，因此我还不得不链接vue进行开发和测试：

cd node_modules/vue
yarn link
cd ../../

现在进入示例目录并使用那里的链接

cd example
yarn link "vue-flowy"
yarn link "vue"

现在运行该应用程序进行测试

yarn serve

 

支持

您好，我是我的业余时间该项目的维护者Patrick（如今这种情况正在减少），如果该项目确实以任何方式对您有所帮助，请考虑为我提供拉取请求。谢谢

 

---

 

英文原文

Smart flowchart creation based on Vue.

Works with Vue 2.*

Installation

Install via NPM

$ npm install vue-flowy --save

Install via yarn

$ yarn add vue-flowy

Register as Component

import {VueFlowy} from 'vue-flowy'

export default {
  name: 'App',

  components: {
    VueFlowy
  }
}

Register as plugin

import Vue from 'vue'
import {VueFlowy} from 'vue-flowy'

Vue.component(VueFlowy)

Usage

Quick example

See a demo on CodeSandbox

<template>
  <VueFlowy :chart='chart'></VueFlowy>
</template>

<script>
import {VueFlowy, FlowChart} from 'vue-flowy'

export default {
  name: 'App',

  components: {
    VueFlowy
  },

  data: () => ({
    chart: new FlowChart()
  }),
  mounted() {
    const idea = this.chart.addElement('idea')
    const A = this.chart.addElement('A', {label: 'vscode'})
    const B = this.chart.addElement('B', {label: 'github'})
    const C = this.chart.addElement('C', {label: 'npm'})
    idea.leadsTo(A).leadsTo(B)
    A.leadsTo(C)

    A.on('click', function() {
      console.log('click!')
    })
  },
}
</script>

Props

Props	Description	Required	Type	Default
chart	The Chart data (type of FlowChart)	true	FlowChart	-

API

Every FlowChart starts by creating a new FlowChart instance with the FlowChart class:

FlowChart

data() {
  return {
    chart: new FlowChart()
  }
}

The creation currently allows the following options:

option	Description	Type	Default
direction	The direction in which the chart is built. Can be LR, TB, BT, RL	string	LR

Now you can work with the new chart variable

<FlowChart>.addElement(id, [options])

Used to add nodes to the chart. Every node needs an id, so this field is required. returns class FlowElement

Available options are:

option	Description	Type	Default
label	A label which shows up on the node	string	id

FlowElement

A FlowElement is returned by <FlowChart>.addElement. It represents one node

<FlowElement>.leadsTo(<FlowElement>, [options])

Used to connect two elements with an edge.

Available options are:

option	Description	Type	Default
label	A label which shows up on the edge	string	''

<FlowElement>.on(event, callback)

Used to add events to FlowElements. Can be any event.

License

Vue-Flowy is open-sourced software licensed under the MIT license

Contributing

As my time is limited, I would be happy if someone contributes to this project. Simply clone the repo and start developing. At the end run yarn build to build the package to test it.

Then link the package using yarn link As vue is a peer dependency, I also had to link vue for development and testing:

cd node_modules/vue
yarn link
cd ../../

Now go into the example directory and use the links there

cd example
yarn link "vue-flowy"
yarn link "vue"

Now run the app to test it out

yarn serve

Support

Hello, I'm Patrick the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me with pull requests. Thanks