1. 首页
  2. >
  3. 前端开发
  4. >
  5. Vue

用vue一分钟快速实现一个流程图编辑器

播放 暂停
进入全屏 退出全屏
00:00 00:00
重播 刷新试试

安装

topology-vue@0.1.12

$ npm install topology-vue  # OR  $ yarn add topology-vue 复制代码

使用组件

1. 导入组件

Typescript使用方式
https://github.com/le5le-com/topology-vue-ts/releases/tag/quick

<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/topology-vue-js/releases/tag/quick

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