用vue一分鐘快速實現一個可視化編輯器（流程圖、拓撲圖、web組態、SCADA）

時間 2020-12-04

標籤 css html vue git github ajax npm canvas app echarts 欄目系統架構简体版

原文原文鏈接

視頻教程： https://www.bilibili.com/vide...css

安裝

topology-vuehtml

$ npm install topology-vue

# OR

$ yarn add topology-vue

使用組件

1. 導入組件

Typescript使用方式
https://github.com/le5le-com/...vue

<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/...git

<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>