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