代码拉取完成,页面将自动刷新
vue-flow-editor 是基于 Vue2.0 以及 G6@3.1.10 实现的流程编辑器。在线操作地址:
http://martsforever-pot.gitee.io/vue-flow-editor/
可以参考这个 html 文件的内容:
如果你希望在ie浏览器下查看这个demo的效果,请看地址:
npm i vue-flow-editor element-ui @vue/composition-api@0.3.2 -D
import Vue from 'vue'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'vue-flow-editor/docs/lib/g6.umd.min'
import vca from '@vue/composition-api'
import VueFlowEditor from 'vue-flow-editor'
import 'vue-flow-editor/docs/dist/vue-flow-editor.css'
import App from './App.vue'
Vue.use(ELEMENT)
Vue.use(vca)
Vue.use(VueFlowEditor)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
如果你的构建目标需要兼容ie的话,这样做还不够,你还需要这么做:
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
属性名称 | 类型 | 默认值 | 可选值 | 说明 |
---|---|---|---|---|
data | object | --- | --- | 渲染的数据,数据格式参考G6文档 |
grid | boolean | true | --- | 是否开启网格 |
miniMap | boolean | false | --- | 是否开启缩略图 |
--- | --- | --- | --- | --- |
disabledDragEdge | boolean | --- | --- | 是否禁用拖拽连线 |
disabledUndo | boolean | --- | --- | 是否禁用撤销/重做 |
--- | --- | --- | --- | --- |
height | number,string | 100% | --- | 画布高度 |
toolbarHeight | string,number | 50px | --- | 工具栏高度 |
menuWidth | string,number | 250px | --- | 菜单栏宽度 |
modelWidth | string,number | 500px | --- | 右侧弹框宽度 |
--- | --- | --- | --- | --- |
onRef | (editor:object null )=>void | --- | --- | 获取组件的引用时,传递的函数,参数为组件暴露的函数以及响应式变量 |
toolbarButtonHandler | (object:[])=>object[] | --- | --- | 对工具栏按钮做格式化的函数 |
loading | boolean | --- | --- | 开始编辑器的loading状态 |
multipleSelect | boolean | true | --- | 编辑器是否可以多选 |
--- | --- | --- | --- | --- |
beforeDelete | (model:object)=>Promise | --- | --- | 删除前校验 |
afterDelete | (model:object)=>Promise | --- | --- | 删除后动作 |
beforeAdd | (model:object)=>Promise | --- | --- | 添加前校验 |
afterAdd | (model:object)=>Promise | --- | --- | 添加后动作 |
属性名称 | 类型 | 说明 |
---|---|---|
editorState | object | 编辑器组件内部状态变量 |
commander | object | 命令对象,画布中所有操作都是通过commander进行的,以便实现撤销以及重做 |
openModel | function | 打开右侧弹框 |
closeModel | function | 关闭右侧弹框 |
updateModel | function | 更新model |
openPreview | function | 打开预览对话框 |
从左至右依次为:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。