flow-chart-v2 流程图

流程图组件 基于 vue2 开发 主要用于显示和点击交互事件，未做过多封装

效果图

使用步骤

1. 安装依赖

npm i flow-chart-v2

2. main.js 中注册

// main.js
import FlowChart from "flow-chart-static-vue";
import "flow-chart-static-vue/flow-chart/flow-chart.css";
Vue.use(FlowChart);

3.组件内使用

<template>
  <div id="app">
    <!-- chartKeyField是唯一标识 chartNameField是显示的名称 -->
    <!-- clickItem是点击每一列执行事件 -->
    <flow-chart
      :chartList="chartList"
      chartNameField="fieldName"
      @clickItem="clickItem"
    />
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      chartList: [
        {
          id: 1,
          fieldName: "流程步骤01",
        },
        {
          id: 2,
          fieldName: "流程步骤02",
        },
        {
          id: 3,
          fieldName: "流程步骤03",
        },
        {
          id: 4,
          fieldName: "流程步骤04",
        },
        {
          id: 5,
          fieldName: "流程步骤05",
        },
        {
          id: 6,
          fieldName: "流程步骤06",
        },
        {
          id: 7,
          fieldName: "流程步骤07",
        },
      ],
    };
  },
  methods: {
    clickItem(item) {
      console.log(item);
    },
  },
};
</script>

<style></style>

props 配置项

| Property | Description | Type | Default | required | | -------------- | ------------------ | -------- | ------- | -------- | | chartList | 渲染数组 | Array | [] | 是 | | chartNameField | 内容区字段名 | String | '' | 是 | | chartKeyField | 渲染唯一 ID 字段名 | string | id | 是 | | colunmNum | 每一列显示的格式 | Number | 4 | 否 |

自定义事件

| event | Description | Type | Default | | --------- | ---------------- | ---------- | ------- | | clickItem | 点击每一列的事件 | Function | 无 |