vue-network-topology

介绍

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

软件架构

属性模块

数据模块

拓扑树模块

资源树模块

图形库模块

工具模块

设计指南

概览

General

原则

Principle

安装教程

1. 下载

npm install vue-network-topology

2. 引入

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

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

3. 使用

<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的官方文档

最佳实践

大客户网络管家拓扑编辑器

Editor1

专网管家拓扑编辑器

Editor1

网络运营平台拓扑可视

Visual

参考文献

• Vue 2.x官方文档
• Ant-Design-Vue 1.x官方文档

许可说明

MIT

Copyright (c) 2023-present Victor Lee