vue2开发必备插件

此文档正在策马奔腾随着业务开发，持续更新中。。。。

1.富文本编辑器

一开始使用了wangEditor，vue 版本咋都装不上，为了应付给客户简单展示页面，只需要提供展示编辑器，选择了vue版本的markDown,简单方便快捷

介绍 | v-md-editor

​

 2.自定义流程图

推荐https://antv.vision/zh

让你的数据动起来，扭起来

根据业务需求，实现一个流程图的demo，代码一并乘现给各位小主

​

<template>
  <div>
    <div id="containerInventory"></div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
export default {
  name: "functionPointAssetCollectionReturn",
  data() {
    return {
      datas: [
        {
          id: "1",
          shape: "change",
          width: 120,
          height: 50,
          position: {//表示流程盒子的位置
            x: 100,
            y: 80
          },
          label: "开始"//表示文本的文字
        },
        {
          id: "2",
          shape: "bpmn-edge",
          source: "1",//表示流程箭头的出发位置，值对应每个id
          target: "3",//表示流程箭头的指向位置
        //   label: "2"
          // vertices: [{ x: 200, y: 280 }]//可以控制流程箭头的指向x代表x轴，y代表y轴
        },
        {
          id: "3",
          shape: "activity",
          width: 120,
          height: 50,
          attrs: {
            body: {
              stroke: "#5F95FF",
              fill: "#ffffff"
            },
            label: {
              fill: "#999999"
            }
          },
          position: {
            x: 280,
            y: 80
          },
          label: "提出资产转移需求"//3
        },
        {
          id: "4",
          shape: "gateway",
          width: 80,
          height: 80,
          position: {
            x: 300,
            y: 210
          }
        },
        {
          id: "5",
          shape: "bpmn-edge",
          source: "4",
          target: "3",
        //   label: "5",
          vertices: [{ x: 250, y: 250 }]
        },
        {
          id: "6",
          shape: "bpmn-edge",
          source: "3",
          target: "4",
        //   label: "5"
        },
        {
          id: "7",
          shape: "activity",
          width: 120,
          height: 50,
          attrs: {
            body: {
              stroke: "#5F95FF",
              fill: "#ffffff"
            },
            label: {
              fill: "#999999"
            }
          },
          position: {
            x: 380,
            y: 370
          },
          label: "盘点资产"//7
        },
        {
          id: "8",
          shape: "activity",
          width: 120,
          height: 50,
          position: {
            x: 500,
            y: 80
          },
          label: "确认盘点资产"//8
        },
        {
          id: "9",
          shape: "change",
          width: 120,
          height: 50,
          position: {
            x: 700,
            y: 80
          },
          label: "结束"//9
        },
        {
          id: "10",
          shape: "bpmn-edge",
          source: "4",
          target: "7",
        //   label: "10"
        },
        {
          id: "11",
          shape: "bpmn-edge",
          source: "7",
          target: "8",
        //   label: "11"
        },
        {
          id: "12",
          shape: "bpmn-edge",
          source: "8",
          target: "9",
        //   label: "12"
        }
      ]
    };
  },
  mounted() {
    Graph.registerNode(//组合封装一个activity
      "activity",
      {
        inherit: "rect",//矩形
        markup: [
          {
            tagName: "rect",
            selector: "body"
          },
          {
            tagName: "text",
            selector: "label"
          }
        ],
        attrs: {
          body: {
            rx: 5,
            ry: 5,
            stroke: "#5F95FF",
            fill: "#EFF4FF",
            strokeWidth: 1
          },
          label: {
            fontSize: 12,
            fill: "#262626"
          }
        }
      },
      true
    );
    Graph.registerNode(
      "gateway",
      {
        inherit: "polygon",
        attrs: {
          body: {
            refPoints: "0,10 10,0 20,10 10,20",
            strokeWidth: 2,
            stroke: "#5F95FF",
            fill: "#EFF4FF"
          },
          label: {
            text: "审批",
            fontSize: 16,
            fill: "#5F95FF"
          }
        }
      },
      true
    );
    Graph.registerEdge(
      "bpmn-edge",
      {
        inherit: "edge",
        attrs: {
          line: {
            stroke: "#71A2FF",
            strokeWidth: 2
          }
        }
      },
      true
    );
    const graph = new Graph({
      container: document.getElementById("containerInventory"),
      width: 1200,
      height: 1000,
      connecting: {
        router: "orth"
      }
    });
    graph.fromJSON(this.datas);
  }
};
</script>

<style lang="less" scoped>

#containerInventory {
  position: absolute !important;
  width: 1200px !important;
  height: 800px !important;
  top: 120px;
  left: 240px;
}
</style>