基于vue的svg画线

图表 (diagram-vue)

A vue component library of diagrams.

Vue组件图库。

安装 (Installaion)

npm i diagram-vue --save

用法 (Usage)

即用型编辑器 (Ready-to-use editor)

1.进口 (1. Import)

import { DiagramEditor } from "diagram-vue";
import "diagram-vue/dist/diagram.css";

2.模板 (2. Template)

<DiagramEditor v-model="graph"></DiagramEditor>

Sample data represents the data structure of v-model.

样本数据表示v模型的数据结构。

客制化 (Customization)

1.进口 (1. Import)

import Diagram from 'diagram-vue';
import "diagram-vue/dist/diagram.css";

2.模板 (2. Template)

<Diagram:width="2000":height="1000"scale="1"background="#fafafa":nodes="nodes":links="links":editable="editable":labels="{edit: 'Edit',remove: 'Remove',link: 'Link',select: 'Select'}"@editNode="editNode"@editLink="editLink"@nodeChanged="nodeChanged"@linkChanged="linkChanged">
</Diagram>

3.道具 (3. Props)

props: {width: Number,height: Number,background: String,nodes: Array,links: Array,editable: Boolean,labels: Object
}

Sample data helps you know the data structure of nodes and links.

样本数据可帮助您了解节点和链接的数据结构。

4.活动 (4. Events)

editNode(node /* selected node */) {/* event handler */
},
editLink(link /* selected link */) {/* event handler */
},
nodeChanged(obj /* array of nodes */) {/* event handler */const nodes = obj.nodes
},
linkChanged(obj /* array of links */) {/* event handler */const links = obj.links
}

发展历程 (Development)

项目设置 (Project setup)

yarn install

编译和热重装以进行开发 (Compiles and hot-reloads for development)

yarn run serve

编译并最小化生产 (Compiles and minifies for production)

yarn run build

运行测试 (Run your tests)

yarn run test

整理和修复文件 (Lints and fixes files)

yarn run lint

运行端到端测试 (Run your end-to-end tests)

yarn run test:e2e

运行单元测试 (Run your unit tests)

yarn run test:unit

翻译自: https://vuejsexamples.com/a-svg-based-vue-component-library-of-diagrams/

基于vue的svg画线