纯vue手写流程组件

前言

网上有很多的vue的流程组件，但是本人不喜欢很多冗余的代码，喜欢动手敲代码；
刚开始写的时候，确实没法下笔，最后一层一层剥离，总算实现了；
大家可以参考我写的代码，可以拿过去定制化修改（因为每个项目的UI风格不一样，更多是样式的不一样）；
关于功能，多一些点击事件呀什么的，我相信对大家来说是问题不大的，难度的部分是怎么画出来；
下面的代码支持vue2也支持vue3，只不过是选项式，反正都支持。不喜欢的，可以稍微改下script部分，改成组合式API就好了。

代码

<!-- * @author kjprime* @description 流程组件-->
<template><div class="process-tree"><!-- 同一层级数据渲染，渲染到了同一行 --><divv-for="(item, index) in data":key="index"class="process-tree__row"><!-- 盒子--><divclass="process-tree__row__box":class="{// 左横线'line-left': index !== 0,// 右横线'line-right': index !== data.length - 1,}"><!-- 盒子里面的容器 --><divclass="process-tree__row__box--container":class="{// 向上竖线'line-bottom': item.children && item.children.length > 0,// 向下竖线'line-top': !isTreeRoot,}"><!-- 向下指向的三角形 --><divv-if="!isTreeRoot"class="process-tree__row__box--container__triangle"/><!-- 内容 --><div class="process-tree__row__box--container__content">{{ item.title }}</div></div></div><process-tree:data="item.children":isTreeRoot="false"/></div></div>
</template><script>
export default {name: "process-tree",props: {/*** @type {Array}* @default []* @example* [*   {*    title: "1",*    children: []*   }* ]* @description 数据*/data: {type: Array,default: () => [],},// 是否为数的root节点// 其实可以通过传父亲与子，通过对比是不是root就可以判断，但是感觉没有必要，直接通过prop可以解决。isTreeRoot: {type: Boolean,default: true,},},
};
</script><style lang="scss" scoped>
// 底部的线高度，也可以当作容器之间的间距
$line-bottom-length: 20px;
// 线粗细
$line-crude: 1px;
// 线颜色
$line-color: rgba(43, 163, 253);
// 盒子里面的容器的border粗细
$container-border-width: 1px;.process-tree {display: flex;&__row {&__box {display: flex;justify-content: center;position: relative;&--container {position: relative;display: flex;justify-content: center;background-color: #eafffc;border: $container-border-width solid $line-color;padding: 4px;margin: $line-bottom-length;color: #fff;&__triangle {position: absolute;border-left: 4.5px solid transparent;border-right: 4.5px solid transparent;border-top: 6px solid rgba(43, 163, 253, 0.7);top: -6px;}&__content {display: flex;flex-direction: column;justify-content: space-between;align-items: center;color: black;padding: 8px 40px;}}}}// 线样式@mixin line {content: "";display: block;height: $line-bottom-length;position: absolute;left: 0;right: 0;margin: auto;background-color: $line-color;}// 向下的线.line-bottom {&::after {@include line;width: $line-crude;bottom: -$line-bottom-length - $container-border-width;}}// 向上的线.line-top {&::before {@include line;width: $line-crude;top: -$line-bottom-length - $container-border-width;}}// 向左的线.line-left {&::after {@include line;width: calc(50%);height: $line-crude;left: calc(-50%);top: 0;}}// 向右的线.line-right {&::before {@include line;width: calc(50%);height: $line-crude;right: calc(-50%);top: 0;}}
}
</style>

实操使用

 <ProcessTree :data="problemTreeData" />
problemTreeData: [{title: "1",children: [{title: "2",children: [{title: "3",children: [{title: "4",},],},{title: "3",children: [{title: "4",},],},],},{title: "2",},],},
]