Workflow Designer for Vue

Usage

<template>
  <div id="app">
    <wfd-vue ref="wfd" :data="demoData" :height="600" :users="candidateUsers" :groups="candidateGroups" :categorys="categorys" :lang="lang" />
  </div>
</template>

<script>
import WfdVue from 'wfd-vue'
export default {
  name: 'app',
  components:{
    WfdVue
  },
  data () {
    return {
      lang: "zh",
      demoData: {...},
    }
  }
}
</script>

API

属性

• data: 初始化数据
• height: 画布高度
• mode: view为只读，edit为可编辑
• lang: zh为中文，en为英文
• isView: 是否为预览模式（隐藏工具栏和属性栏）

方法

• saveJson(): 调用this.$refs['wfd'].graph.save()生成json
• saveImg(): 调用this.$refs['wfd'].graph.saveImg(createFile)生成图片，createFile参数表示是否生成图片文件，默认为true，该函数返回值为图片base64

Run Example

npm run serve