vue 图扑 开发_用vue一分钟快速实现一个可视化编辑器（流程图、拓扑图、web组态、SCADA）...

安装

topology-vue$ npm install topology-vue

# OR

$ yarn add topology-vue

使用组件

1. 导入组件

import { Component, Vue } from 'vue-property-decorator';

import topology from 'topology-vue';

import 'topology-vue/topology-vue.css';

@Component({

components: {

topology,

},

})

export default class Home extends Vue {}

.home {

height: calc(100vh - 80px);

}

// 导入topology-vue组件

import topology from "topology-vue";

// 需要导入topology-vue.css

import "topology-vue/topology-vue.css";

export default {

name: "Home",

components: {

topology,

},

};

.home {

height: 100vh;

}

2. 加载相关字体文件

href="//at.alicdn.com/t/font_2030495_pwo1zu1ka1.css"

rel="stylesheet"

/>

href="//at.alicdn.com/t/font_1331132_qhyav2o6mp.css"

rel="stylesheet"

/>

We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.

3. 加载相关js文件

页面效果

底层核心库开源

topology-vue基于开源核心库开发的上层应用

核心库GIthub： https://github.com/le5le-com/...