视频
www.bilibili.com/video/BV17p…
完整代码
js源码: github.com/le5le-com/t…
ts源码: github.com/le5le-com/t…
定制导航菜单
设置configs属性，参考文档API部分说明。
[说明]topology-vue分免费版和企业版。免费版可以任意使用，但会保留社区相关菜单；企业版没有相关限制，帮助我们发展的更强、更好用，和为国产原创开源发展做出一份贡献。（企业版通过一个授权码识别）
js中使用示例：
<div class="home">
<!-- 使用topology组件 -->
<topology :configs="topologyConfigs" :user="user" />
</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,
},
data: function () {
return {
topologyConfigs: {
logo: {
img: "http://topology.le5le.com/assets/img/favicon.ico",
url: "http://topology.le5le.com",
target: "_blank",
},
menus: [
{
name: "文件(自定义菜单1)",
children: [
{ name: "新建文件", keyboard: "Ctrl+N", action: "open" },
{ name: "打开文件", keyboard: "Ctrl+O", action: "loadNew" },
{ name: "导入文件", keyboard: "Ctrl+I", action: "load" },
{},
{ name: "保存", keyboard: "Ctrl+S", action: "save" },
{ name: "另存为", keyboard: "Ctrl+Shift+I", action: "saveAs" },
{ name: "下载JSON文件", action: "downloadJson" },
{ name: "下载zip打包文件", action: "downloadZip" },
{},
{ name: "导出为HTML", action: "downloadHtml" },
{},
{ name: "下载为PNG", action: "downloadPng" },
{ name: "下载为SVG", action: "downloadSvg" },
],
},
{
name: "编辑(自定义菜单2)",
children: [
{ name: "撤销", keyboard: "Ctrl+Z", action: "undo" },
{ name: "恢复 ", keyboard: "Ctrl+Shift+Z", action: "redo" },
{},
{ name: "剪切 ", keyboard: "Ctrl+X", action: "cut" },
{ name: "复制 ", keyboard: "Ctrl+C", action: "copy" },
{ name: "粘贴 ", keyboard: "Ctrl+V", action: "paste" },
],
},
{
name: "我的菜单3",
router: "/page",
},
],
loginUrl: "https://account.le5le.com",
signupUrl: "https://account.le5le.com",
userMenus: [
{ name: "个人中心", router: "/user/home" },
{},
{
name: "账号设置",
url: "https://account.le5le.com/user/profile",
target: "_blank",
},
{},
{ name: "退出", action: "logout" },
],
},
};
},
};
</script>
<style lang="scss">
.home {
height: 100vh;
}
</style>
js源码: github.com/le5le-com/t…
ts源码: github.com/le5le-com/t…
设置用户登录
1. 显示用户已登录
2. 设置用户菜单
3. 退出登录
根据实际情况，配置用户菜单configs.userMenus中的菜单响应方式即可。
- A. 可以跳转到vue路由处理;
参考菜单属性router配置： - B. 跳转新页面处理；
参考菜单属性url配置： - C. 通过发消息通知处理
参考菜单属性action配置，同时设置event事件函数：
<template>
<div class="home">
<!-- 使用topology组件 -->
<topology :configs="topologyConfigs" :user="user" @event="onEvent" />
</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,
},
data: function () {
return {
topologyConfigs: {
logo: {
img: "http://topology.le5le.com/assets/img/favicon.ico",
url: "http://topology.le5le.com",
target: "_blank",
},
menus: [
{
name: "文件(自定义菜单1)",
children: [
{ name: "新建文件", keyboard: "Ctrl+N", action: "open" },
{ name: "打开文件", keyboard: "Ctrl+O", action: "loadNew" },
{ name: "导入文件", keyboard: "Ctrl+I", action: "load" },
{},
{ name: "保存", keyboard: "Ctrl+S", action: "save" },
{ name: "另存为", keyboard: "Ctrl+Shift+I", action: "saveAs" },
{ name: "下载JSON文件", action: "downloadJson" },
{ name: "下载zip打包文件", action: "downloadZip" },
{},
{ name: "导出为HTML", action: "downloadHtml" },
{},
{ name: "下载为PNG", action: "downloadPng" },
{ name: "下载为SVG", action: "downloadSvg" },
],
},
{
name: "编辑(自定义菜单2)",
children: [
{ name: "撤销", keyboard: "Ctrl+Z", action: "undo" },
{ name: "恢复 ", keyboard: "Ctrl+Shift+Z", action: "redo" },
{},
{ name: "剪切 ", keyboard: "Ctrl+X", action: "cut" },
{ name: "复制 ", keyboard: "Ctrl+C", action: "copy" },
{ name: "粘贴 ", keyboard: "Ctrl+V", action: "paste" },
],
},
{
name: "我的菜单3",
router: "/page",
},
],
loginUrl: "https://account.le5le.com",
signupUrl: "https://account.le5le.com",
userMenus: [
{ name: "个人中心", router: "/user/home" },
{},
{
name: "账号设置",
url: "https://account.le5le.com/user/profile",
target: "_blank",
},
{},
{ name: "退出", action: "logout" },
],
},
user: {
username: "le5le",
},
};
},
methods: {
onEvent(e) {
switch (e.name) {
case "logout":
this.user = null;
// Do sth.
break;
// ...
// ...
}
},
},
};
</script>
<style lang="scss">
.home {
height: 100vh;
}
</style>
js源码: github.com/le5le-com/t…
ts源码: github.com/le5le-com/t…
定制图标库工具栏
1. 系统组件
“系统组件”指公用组件，所有人都可以访问。
参考API配置materials.system属性即可。
<div class="home">
<!-- 使用topology组件 -->
<topology
:configs="topologyConfigs"
:materials="materials"
:user="user"
@event="onEvent"
/>
</div>
</template>
<script>
// 导入topology-vue组件
import topology from 'topology-vue';
// 需要导入topology-vue.css
import 'topology-vue/topology-vue.css';
import { defalutMaterials } from './data';
export default {
name: 'Home',
components: {
topology
},
data: function() {
return {
topologyConfigs: {
license: {
key: '企业版授权码',
value: '国产原创开源发展做出我们的贡献'
},
logo: {
img: 'http://topology.le5le.com/assets/img/favicon.ico',
url: 'http://topology.le5le.com',
target: '_blank'
},
menus: [
{
name: '文件(自定义菜单1)',
children: [
{ name: '新建文件', keyboard: 'Ctrl+N', action: 'open' },
{ name: '打开文件', keyboard: 'Ctrl+O', action: 'loadNew' },
{ name: '导入文件', keyboard: 'Ctrl+I', action: 'load' },
{},
{ name: '保存', keyboard: 'Ctrl+S', action: 'save' },
{ name: '另存为', keyboard: 'Ctrl+Shift+I', action: 'saveAs' },
{ name: '下载JSON文件', action: 'downloadJson' },
{ name: '下载zip打包文件', action: 'downloadZip' },
{},
{ name: '导出为HTML', action: 'downloadHtml' },
{},
{ name: '下载为PNG', action: 'downloadPng' },
{ name: '下载为SVG', action: 'downloadSvg' }
]
},
{
name: '编辑(自定义菜单2)',
children: [
{ name: '撤销', keyboard: 'Ctrl+Z', action: 'undo' },
{ name: '恢复 ', keyboard: 'Ctrl+Shift+Z', action: 'redo' },
{},
{ name: '剪切 ', keyboard: 'Ctrl+X', action: 'cut' },
{ name: '复制 ', keyboard: 'Ctrl+C', action: 'copy' },
{ name: '粘贴 ', keyboard: 'Ctrl+V', action: 'paste' }
]
},
{
name: '我的菜单3',
router: '/page'
}
],
loginUrl: 'https://account.le5le.com',
signupUrl: 'https://account.le5le.com',
userMenus: [
{ name: '个人中心', router: '/user/home' },
{},
{
name: '账号设置',
url: 'https://account.le5le.com/user/profile',
target: '_blank'
},
{},
{ name: '退出', action: 'logout' }
]
},
user: {
username: 'le5le'
},
materials: {
system: defalutMaterials
}
};
},
methods: {
onEvent(e) {
switch (e.name) {
case 'logout':
this.user = null;
// Do sth.
break;
case 'openMaterialGroup':
// 点击了图标工具栏分组
console.log('openMaterialGroup', e.params);
// Do sth.
break;
// ...
// ...
}
}
}
};
</script>
<style lang="scss">
.home {
height: 100vh;
}
</style>
【注意】当工具栏图标比较多时，可采用异步加载，在onEvent中监听展开分组事件：'openMaterial'。
1.1 添加阿里字体图形库
企业版支持把阿里字体作为图形库加载到工具栏。
使用方法：在materials.system中添加iconUrl类型的数据即可。例如：
defalutMaterials = [
{
name: '基本形状',
expand: true,
show: true,
list: [
{
name: 'rectangle',
icon: 't-icon t-rect',
id: 1,
data: {
text: '正方形',
rect: {
width: 100,
height: 100
},
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
name: 'rectangle',
icon: '\ue64d',
iconFamily: 'topology',
iconColor: '#2f54eb'
}
}
]
},
{
iconUrl: '//at.alicdn.com/t/font_xxxxx.css', // 替换成真实的地址
show: true,
list: [], // 此处留空数组就好，会自动填充
}
]
2. 我的组件
“我的组件”指用户在线编辑的组件列表，属于用户独有。
参考API配置materials.user属性即可。
2.1 新建我的组件
可以在onEvent中监听“addMaterial”，用于自己的业务处理。比如，路由变化，以及保存消息时，图文的数据保存和组件的数据保存处理是不一样的。
2.2 编辑我的组件
点击“我的组件”右上角编辑按钮，可进入编辑组件状态。可以在onEvent中监听“editMaterial”，用于自己的业务处理。
2.3 保存组件
可以在onEvent中监听“save”保存操作：
-
- 通过topology.toComponent() 得到节点数据componentData
-
- 通过topology.toImage 得到预览图
-
- 调用自己的接口保存数据即可。
3. 我的图片
“我的组件”指用户上传的图片作为图形节点。
参考API配置materials.images属性即可。
export const images = [
{
image:
'https://iconfont.alicdn.com/t/d2ffc78f-ce7a-4b02-94c9-7a2224bf8485.png'
}
];
3.1 上传图片
可以配置一个上传接口地址，实现图片上传。具体参数参考：API.materials.uploadXXX相关属性。 url接口方式：
materials: {
system: defalutMaterials,
user: userMaterials,
images,
uploadUrl: '/api/file',
uploadHeaders: {
Authorization: 'your token'
},
uploadParams: {
mydata: 1
}
}
自定义上传函数方式uploadFn：参考antdv的上传组件用法
完整源码
js源码：https://github.com/le5le-com/topology-vue-js/tree/materials
ts源码：https://github.com/le5le-com/topology-vue-ts/tree/materials
响应菜单等事件
导航菜单栏我们期望触发一个自定义的事件（比如保存用自己的接口）、监听画布消息等场景，我们可以通过event函数去监听。
<template>
<div class="home">
<!-- 使用topology组件 -->
<topology
:configs="topologyConfigs"
:materials="materials"
:user="user"
@event="onEvent"
/>
</div>
</template>
methods: {
onEvent(e) {
switch (e.name) {
case 'logout':
// 退出登录
this.user = null;
// Do sth.
break;
case 'openMaterialGroup':
// 展开/折叠图标工具栏分组
console.log('openMaterialGroup', e.params);
// Do sth.
break;
case 'addMaterial':
// 添加“我的组件”
// Do sth. For example:
this.$router.push({
path: '/',
query: { component: '1' }
});
break;
case 'editMaterial':
// 编辑“我的组件”
// Do sth. For example:
this.$router.push({
path: '/',
query: { id: e.params.id, component: '1' },
});
break;
case 'open':
// 导航菜单configs.menus里面定义的action
// 比如这里表示打开文件
break;
case 'save':
// 导航菜单configs.menus里面定义的action
// 比如这里表示保存文件
break;
case 'addImageUrl':
// 在“我的图片”里面添加了一张新图片
// this.addImageUrl(e.params);
break;
case 'deleteImage':
// 在“我的图片”里面删除了一张图片
// this.deleteImage(e.params);
break;
case 'preview':
// 点击工具栏“预览”
this.$router.push({
path: '/preview',
query: { id: 'xxx', r: '1' }
});
break;
// ...
// ...
}
}
}
js源码：https://github.com/le5le-com/topology-vue-js/tree/events
ts源码：https://github.com/le5le-com/topology-vue-ts/tree/events
属性面板-数据输入配置
画笔的数据面板，支持多种类型的表单输入。其中包含下拉选项的，需要通过配置选项函数，返回下拉列表
如何使用：
仅select、自动完成等下拉选项输入框需要配置。通过configs.dataOptionsFn函数返回一个符合antdv下拉列表select等组件格式的数组。
export default {
name: 'Home',
components: {
topology
},
data: function() {
return {
topologyConfigs: {
license: {
key: '企业版授权码',
value: '国产原创开源发展做出我们的贡献'
},
logo: {
img: 'http://topology.le5le.com/assets/img/favicon.ico',
url: 'http://topology.le5le.com',
target: '_blank'
},
menus: defalutMenus,
loginUrl: 'https://account.le5le.com',
signupUrl: 'https://account.le5le.com',
userMenus: defalutUserMenus,
dataOptionsFn: (pen, key, value) => {
// pen - 当前画笔对象
// key - 表单输入左侧的属性名
// value - 仅下拉搜索时有效，当前输入文本
console.log('dataOptionsFn', pen, key, value);
// ************
// 根据实际业务场景 + 参数返回数组对象。
// Do sth.
// ************
return [{
label: '选项1',
value: 1
}, {
label: '选项2',
value: 2
}, {
label: '选项3',
value: 3
}];
}
},
user: {
username: 'le5le'
},
materials: {
system: defalutMaterials,
user: userMaterials,
images,
uploadUrl: '/api/file',
uploadHeaders: {
Authorization: 'your token'
},
uploadParams: {
mydata: 1
}
}
};
},
// .....
}
何时触发函数
• 新增数据
• 修改属性名（可以根据不同属性名返回不同的下拉选项）
• （自动完成输入框有效）搜索内容变化
js源码: github.com/le5le-com/t…
ts源码: github.com/le5le-com/t…
预览
设置preview属性和data属性即可。
<template>
<div class="preview">
<topology preview="true" :data="data" />
</div>
</template>
示例代码实现过程：
- 编辑器页面监听preview事件，保存绘画数据
- 新路由页面（预览和编辑器页面都是一样的）created时，先读取缓存数据，再读取接口数据
完整代码参考：
js源码: github.com/le5le-com/t…
ts源码: github.com/le5le-com/t…
其他
1. 隐藏“分享”按钮
通过覆盖css隐藏即可。css class: share-btn
2. echarts库加载
需要使用echarts图形库的，可以在html中直接加载想要的版本：
如果画布没有检查到echarts被加载，则采用图形库中默认的cdn版本。
3. 代码编辑器Monaco加载
右侧属性栏数据编辑有使用Monaco编辑器。缺省使用在线cdn： cdn.bootcdn.net/ajax/libs/m… 。
如果内网或其他环境，可以通过configs.monaco指定cdn路径。
4. 依赖工具js
<body>
<div id="app"></div>
<!-- 需要用到的工具js -->
<script src="http://topology.le5le.com/assets/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>
API
configs
配置选项。
| 属性 | 说明 | 类型 | 默认值 | license | 授权码 主要用于企业版用户解锁全部功能。 免费版 - 导航菜单保留“社区”“帮助”“技交流群”等社区菜单 企业版本 - 配置企业授权码，导航菜单完全可定制，没有限制。 | {key, value} | 空。（免费版） | logo | 左上角logo。 img - logo 图片url地址 router - vue路由地址。点击logo调整vue路由地址 url - 新页面地址。点击logo，完全打开新页面。 target - 打开新页面地址的方式，配合url使用。 | { img, router, url, target, } | loginUrl | 右上角“登录”按钮跳转地址 | string | 乐吾乐官网登录地址 | signupUrl | 右上角“注册”按钮跳转地址 | string | 乐吾乐官网注册地址 | menus | 导航菜单内容 | [{ name: 菜单名 router: vue页面路由地址 url: 新页面地址 target: url的打开方式 action: 开发者自己处理的事件名称。（router/url/action三选一） children: [menus] 子菜单 }] | 缺省菜单 | userMenus | 用户登录后，显示的下拉菜单 | 同menus。 其中 name为空，表示分割线 | monaco | monaco-editor cdn前缀地址 | string | cdn.bootcdn.net/ajax/libs/m… | dataOptionsFn | 属性面板 - “数据” - “我的数据”中用到的下拉列表选项函数。 | 函数 (pen, key, value) => { return [{ value, label }]； } 参数： pen: 当前画笔 key: 表单输入的 “属性名” value: 表单输入的当前“属性值”。比如自动完成输入框的当前输入的值。 返回值： 参考antdv的select组件的下列选项格式。 | 空 |
materials
图形库工具栏
| 属性 | 说明 | 类型 | 默认值 | system | 系统组件 | [{ name：分类名称 list: [{ name: 工具栏提示文字 icon：工具栏显示字体图标 data: json对象，符合topology节点的数据结构 }] expand：是否展开 show：是否显示 count：图标个数 iconUrl：企业版功能，阿里字体css地址，支持把阿里字体文件作为组件库 }] | 空。（免费版） | user | 我的组件。一般用于用户在线绘画保存的组件 | [{ id: 编辑时，获取后台接口数据用 name: 组件名称 image:组件预览图url componentData: json对象，符合topology节点的数据结构 data: json对象，符合topology节点的数据结构，和componentData二选一 }] | images | 我的图片 | [{ image:图片url，如果不是同域，需要服务器支持跨域 }] | uploadFn | 文件上传函数。用法参考antdv上传组件a-upload的customRequest参数用法 和下面uploadUrl二选一 | 函数 | uploadUrl | 文件上传接口url | url地址 | uploadName | 文件上传数据中，文件存储的字段名 | string | file | uploadHeaders | 文件上传时，指定的headers | json对象 | uploadParams | 文件上传时，额外的上传参数。用法参考antdv上传组件a-upload的data参数用法 | json对象 |
user
用户信息。判断用户是否登录
| 属性 | 说明 | 类型 | 默认值 | username | 用户名 | string |
preview
boolean类型。是否时预览模式。
data
| 属性 | 说明 | 类型 | 默认值 | data | 画布显示内容topology.data格式 | json 参考topology.data格式 | component | 是否是组件。默认为图文 | boolean | false | id | 数据库id。用于调用后端接口时查询具体图文或组件；同时用于“最近打开的文件”id | string | name | 用于“最近打开的文件”中的名称显示 | string | image | 缩略图url。用于“最近打开的文件”中缩略图显示 | url地址 |
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！