插件名称 | vue-flow |
---|---|
发布时间 | 2021年11月22日 |
插件作者 | bcakmakoglu |
Vue 3 的简单、可定制、快速、交互式的流程图组件。
# Yarn
$ yarn add @braks/vue-flow
# NPM
$ npm i @braks/vue-flow
1、导入vue-flow。
import { VueFlow, Elements } from '@braks/vue-flow';
// 核心样式表
@import "node_modules/@braks/vue-flow/dist/styles.css";
// 默认主题(可选)
@import "node_modules/@braks/vue-flow/dist/theme-default.css";
2.在模板中添加vue-flow组件。
<VueFlow :elements="elements" />
3. 向流程图添加节点。
const elements: Elements = [
{
id: '1',
type: 'input', // 输入节点
data: { label: 'Input Node' },
position: { x: 250, y: 25 },
},
{
id: '2',
// 可以将Vue组件、字符串或html字符串作为标签传递
data: { label: '<div>Default Node</div>' },
position: { x: 100, y: 125 },
},
{
id: '3',
type: 'output', // 输出节点
data: { label: 'Output Node' },
position: { x: 250, y: 250 },
},
// 动画边
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e2-3', source: '2', target: '3' },
]