乐趣区

关于vue.js:用vue一分钟快速实现一个可视化编辑器流程图拓扑图web组态SCADA

jiezi

视频教程：https://www.bilibili.com/vide…

装置

topology-vue

$ npm install topology-vue

# OR

$ yarn add topology-vue

应用组件

1. 导入组件

Typescript 应用形式
https://github.com/le5le-com/…

<template>
  <div class="home">
    <topology />
  </div>
</template>
<script lang="ts">
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 {}
</script>
<style lang="scss">
.home {height: calc(100vh - 80px);
}
</style>

JavaScript 应用形式
https://github.com/le5le-com/…

<template>
  <div class="home">
    <!-- 应用 topology 组件 -->
    <topology />
  </div>
</template>
<script>
// 导入 topology-vue 组件
import topology from "topology-vue";
// 须要导入 topology-vue.css
import "topology-vue/topology-vue.css";
export default {
  name: "Home",
  components: {topology,},
};
</script>
<style lang="scss">
.home {height: 100vh;}
</style>

2. 加载相干字体文件 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 通用字体图标 -->
    <link
    href="//at.alicdn.com/t/font_2030495_pwo1zu1ka1.css"
    rel="stylesheet"
  />
  <!-- 通用根底图形库 -->
  <link
  href="//at.alicdn.com/t/font_1331132_qhyav2o6mp.css"
  rel="stylesheet"
/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
      
    <!-- 须要用到的工具 js -->
    <script src="http://topology.le5le.com/js/canvas2svg.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  </body>
</html>

3. 加载相干 js 文件 

<!-- 须要用到的工具 js -->
<script src="http://topology.le5le.com/js/canvas2svg.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

页面成果

底层外围库开源

topology-vue 基于开源外围库开发的下层利用
外围库 GIthub：https://github.com/le5le-com/…

收费在线应用：http://topology.le5le.com

退出移动版