vue2开发必备插件

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

1.富文本编辑器

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

介绍 | v-md-editor

​

 2.自定义流程图

推荐https://antv.vision/zh

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

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

​

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); }};#containerInventory { position: absolute !important; width: 1200px !important; height: 800px !important; top: 120px; left: 240px;}