x6-editor-vue

1.1.5 • Public • Published

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

。移除对eslint、vue-router的依赖

1.1.4

。优化元素面板高度算法 。优化页面自适应问题 。新增配置对齐线功能

1.1.3

。新增快捷键功能 。新增导出图片功能 。新增配置背景功能 。新增配置栅格功能

浏览器支持

Modern browsers and Internet Explorer 10+.

LICENSE

MIT

Package Sidebar

Install

npm i x6-editor-vue

Weekly Downloads

8

Version

1.1.5

License

MIT

Unpacked Size

5.89 MB

Total Files

7

Last publish

Collaborators

  • joker-diff