1.1.5 • Published 4 years ago
x6-editor-vue v1.1.5
x6-editor-vue
安装
npm install x6-editor-vue -S快速开始
import Vue from 'vue'
import Element from 'element-ui'
import x6EditorVue from 'x6-editor-vue'
import 'x6-editor-vue/lib/x6-editor-vue.css'
Vue.use(x6EditorVue)组件使用
<x6-editor-vue />
//or
<x6-editor-vue></x6-editor-vue>Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| saveData | 保存流程数据 | data |
| exportXml | 导出流程数据 | data |
| exportImg | 导出图片base64数据,常常配合toDataUrl属性使用，如果toDataUrl为false方法无效 | data |
Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 示例 |
|---|---|---|---|---|---|
| removeGroups | 移除原始分组，常常配合groups使用，如果其属性为空，该属性无效 | Boolean | - | false | - |
| groups | 新增分组节点 | Array | - | - | {name: 'keyword', title: '组名称'} |
| removeShapes | 移除原始图形，常常配合shapes使用，如果其属性为空，该属性无效 | Boolean | - | false | - |
| shapes | 新增图形 | object | - | - | cell |
| toDataUrl | 导出图片为base64数据的url | Boolean | - | false | - |
| grid | 开启画布栅格，支持原生x6的grid配置项 | Boolean/Object | - | false | - |
| background | 开启画布背景，支持原生x6的background配置项 | Boolean/Object | - | false | - |
| snapline | 开启对齐线功能，支持原生x6的snapline配置项 | Boolean/Object | - | false | - |
Slot
| name | 说明 |
|---|---|
| StartNode | 开始节点自定义元素面板，参数为 { cell } |
| EndNode | 结束节点自定义元素面板，参数为 { cell } |
| Edge | 连接线自定义元素面板，参数为 { cell } |
| AutoNode | 自动任务节点自定义元素面板，参数为 { cell } |
| UserNode | 人工任务节点自定义元素面板，参数为 { cell } |
| Gateway | 网关节点自定义元素面板，参数为 { cell } |
//示例：
<x6-editor-vue>
<template slot='StartNode' slot-scope="{cell}">
//do something
</template>
</x6-editor-vue>Hotkey
| hotkey | 功能说明 |
|---|---|
| ctrl+alt+n | 清除 |
| ctrl+s | 保存 |
| ctrl+a | 全选 |
| ctrl+z | 撤销 |
| ctrl+y | 重做 |
| ctrl+c | 复制 |
| ctrl+v | 粘贴 |
| ctrl+f | 置顶 |
| ctrl+b | 置后 |
| delete/backspace | 删除 |
| ctrl+UpArrow | 向上平移 |
| ctrl+DownArrow | 向下平移 |
| ctrl+LeftArrow | 向左平移 |
| ctrl+RightArrow | 向右平移 |
注意
1、node版本不能低于14.0.0
2、需要安装vue、vue-cli脚手架
3、需要安装element-ui更新日志
1.1.4
。优化元素面板高度算法 。优化页面自适应问题 。新增配置对齐线功能
1.1.3
。新增快捷键功能 。新增导出图片功能 。新增配置背景功能 。新增配置栅格功能
浏览器支持
Modern browsers and Internet Explorer 10+.
LICENSE
MIT