乐吾乐Topology1.0版本快速上手已迁移：http://developer.le5le.com/topology-documents/tutorial/start.html

乐吾乐Topology 0.5版本快速上手

示例代码

ts: https://github.com/le5le-com/topology-vue-ts
js: https://github.com/le5le-com/topology-vue-js

安装

topology-vue@latest

  1. $ npm install topology-vue
  2. # OR
  3. $ yarn add topology-vue

使用组件

1. 导入组件

Typescript使用方式

  1. <template>
  2.   <div class="home">
  3.     <topology />
  4.   </div>
  5. </template>
  7. <script lang="ts">
  8. import { Component, Vue } from 'vue-property-decorator';
  10. import topology from 'topology-vue';
  11. Vue.use(topology);
  12. import 'topology-vue/topology-vue.css';
  14. @Component({})
  15. export default class Home extends Vue {}
  16. </script>
  17. <style lang="scss">
  18. .home {
  19.   height: calc(100vh - 80px);
  20. }
  21. </style>

JavaScript使用方式

  1. <template>
  2.   <div class="home">
  3.     <!-- 使用topology组件 -->
  4.     <topology />
  5.   </div>
  6. </template>
  8. <script>
  9. import Vue from 'vue';
  10. // 导入topology-vue组件
  11. import topology from "topology-vue";
  12. Vue.use(topology);
  13. // 需要导入topology-vue.css
  14. import "topology-vue/topology-vue.css";
  16. export default {
  17.   name: "Home",
  18. };
  19. </script>
  20. <style lang="scss">
  21. .home {
  22.   height: 100vh;
  23. }
  24. </style>

2. 加载相关字体文件


href=”//at.alicdn.com/t/font1331132_g7tv7fmj6c9.css”
rel=”stylesheet”
/>

href=”//at.alicdn.com/t/font_2030495_3ziztwjjab6.css”
rel=”stylesheet”
/>
_
href=”//at.alicdn.com/t/font_1331132_5lvbai88wkb.css”
rel=”stylesheet”
/>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <!-- 常用图标 -->
  9.     <link
  10.       href="//at.alicdn.com/t/font_1331132_g7tv7fmj6c9.css"
  11.       rel="stylesheet"
  12.     />
  13.     <!-- 新通用图标topology-new -->
  14.     <link
  15.       href="//at.alicdn.com/t/font_2030495_3ziztwjjab6.css"
  16.       rel="stylesheet"
  17.     />
  18.     <!-- 老图标 -->
  19.     <link
  20.       href="//at.alicdn.com/t/font_1331132_5lvbai88wkb.css"
  21.       rel="stylesheet"
  22.     />
  24.     <title><%= htmlWebpackPlugin.options.title %></title>
  25.   </head>
  26.   <body>
  27.     <noscript>
  28.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  29.     </noscript>
  30.     <div id="app"></div>
  31.     <!-- built files will be auto injected -->
  33.     <!-- 需要用到的工具js -->
  34.     <script src="http://topology.le5le.com/js/canvas2svg.js"></script>
  35.     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  36.     <script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script>
  37.     <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  38.   </body>
  39. </html>

3. 加载相关js文件

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

把node_module中topology-vue的view文件夹放到vue项目的public文件夹下面（导出html使用）
image.png

4. 鼠标文件

把npm包中的旋转鼠标文件rotate.cur部署到 [域名]/assets/img/rotate.cur下。旋转鼠标是自定义的文件。

5. monaco 编辑器

以下操作在 topology-vue-ts 的 master 分支都有示例。

  1. 第一种方式将 topology-vue-ts 的 master 分支 public 下的 assets\monaco-editor 文件夹，复制到当前项目 public\assets\ 文件夹下。
  2. 第二种方式是使用 cdn 的方式，对 topology-vue 组件进行 props 传参，configs.monaco 。

页面效果

WX20210129-231249@2x.png
image.png

其他

详细配置参数和事件响应等，参考《使用指南》