wh-flow v1.2.2

wh-flow

基于 Element UI的一套包括流程列表和流程页面的UI组件

npm插件地址：  https://www.npmjs.com/package/wh-flow

安装

npm install wh-flow --save

使用

全局引用 main.js

import WHFlow from 'wh-flow'
Vue.use(WHFlow)

局部引用 test.vue

import { whFlowList, whFlowEditor ... } from 'wh-flow'
components: {
    whFlowList,
    whFlowEditor,
    ...
}

注意

本插件中使用 svg 图片， 项目中使用需要引入 svg-sprite-loader 和 vue-json-editor（ debug 模式查看 json 数据） svg-sprite-loader配置 webpack中的chainWebpack

=== 配置示例 src/assets/icons/svg 中存放 下载的svg svg 下载地址:

          [](https://www.iconfont.cn/search/index)

===

npm install svg-sprite-loader --save-dev

chainWebpack: (config) => {
  config.module
    .rule('svg')
    .exclude.add(resolve('src/assets/icons'))
    .end()
  config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/assets/icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    })
    .end()
}

组件

1. wh-flow-List

例子：

<wh-flow-list
  :base-url="baseUrl"
  :headers="headers"
  @on-click-command="handleClickCommand"/>

2. wh-flow-editor

例子：

<wh-flow-editor
      :base-url="baseUrl"
      :headers="headers"
      @on-back="onBack"
      @on-complete="onComplete" />

3. wh-flow-display

例子：

<wh-flow-display
      :flow-id="flowId"
      :base-url="baseUrl"
      :headers="headers"
      :show-header="false"
      @on-back="onBack" />