Vue-network-topology NPM

vue-network-topology

介绍

一款基于Vue2的网络拓扑组件

软件架构

总体架构

属性模块

数据模块

拓扑树模块

资源树模块

资源模块

图形库模块

工具模块

设计指南

概览

General

原则

Principle

安装教程

下载

npm install vue-network-topology

引入

import * as VueNetworkTopology from 'vue-network-topology'

Object.keys(VueNetworkTopology).forEach(key => {
  Vue.use(VueNetworkTopology[`${key}`])
})

使用

<template>
    <Resource :treeData="treeData"/>
</template>

<script>
export default {
    data() {
        return {
            treeData: []
        }
    }
}
</script>

<style></style>

组件说明

组件	名称	备注
属性组件	Attr	`import { Attr } from 'vue-network-topology'`
属性节点组件	NodeAttr	`import { NodeAttr } from 'vue-network-topology'`
属性线组件	LinkAttr	`import { LinkAttr } from 'vue-network-topology'`
属性组组件	GroupAttr	`import { GroupAttr } from 'vue-network-topology'`
画布组件	Canvas	`import { Canvas } from 'vue-network-topology'`
数据组件	Data	`import { Data } from 'vue-network-topology'`
数据节点组件	NodeData	`import { NodeData } from 'vue-network-topology'`
数据线组件	LinkData	`import { LinkData} from 'vue-network-topology'`
拓扑树组件	Layer	`import { Layer } from 'vue-network-topology'`
图形库组件	Library	`import { Library } from 'vue-network-topology'`
图形库区块组件	LibraryBox	`import { LibraryBox } from 'vue-network-topology'`
图形库区块组组件	LibraryBoxGroup	`import { LibraryBoxGroup } from 'vue-network-topology'`
资源树组件	Resource	`import { Resource } from 'vue-network-topology'`
工具组件	Tool	`import { Tool } from 'vue-network-topology'`
工具区块组件	ToolBox	`import { ToolBox } from 'vue-network-topology'`
工具区块组组件	ToolBoxGroup	`import { ToolBoxGroup } from 'vue-network-topology'`

依赖说明

依赖	依赖包	备注
vue	vue 2.x	基于vue2的运行时进行构建
ant-design-vue	ant-design-vue 1.x	基于ant-design-vue的组件库进行构建，主题色修改等请参考ant-desgin-vue的官方文档