封装一个 Vue 3 流程线可视化组件

在这里插入图片描述

这个组件展示了一系列带有节点和箭头连接的流程线，并具备不同风险等级的样式和动画效果，非常适合大屏展示项目。

功能概述

这个流程线组件具备以下功能：

动态渲染：根据传入的数据，组件可以自动生成节点和箭头。
风险等级样式：不同的节点根据风险等级（1-3）呈现不同的视觉效果。
炫酷的动画效果：节点和箭头自带动画效果，适合用于大屏可视化项目。
灵活的数据传递：通过组件的 props 传递数据，支持动态更新。

接下来，我将带你一步步实现这个组件，并展示如何在项目中使用。

组件实现

1. 组件的基本结构

我们首先定义组件的基本模板和脚本部分。FlowLine 组件接受一个 data 参数，代表流程线的各个节点，并根据节点的 risk 属性渲染不同的样式。

<template><div class="flow-container"><div v-for="(line, index) in state" :key="index" class="flow-line"><div v-for="(node, nodeIndex) in line" :key="nodeIndex" class="node-wrapper"><div class="node" :class="getRiskClass(node.risk)">{{ node.label }}</div><div v-if="nodeIndex < line.length - 1" class="arrow-wrapper"><div class="arrow"></div></div></div></div></div>
</template><script setup>
import { ref, watch, defineProps } from 'vue';const state = ref([]);const props = defineProps({data: {type: Array,default: () => [],},
});function getRiskClass(risk) {if (risk === 1) return 'risk-1';if (risk === 2) return 'risk-2';if (risk === 3) return 'risk-3';return '';
}watch(() => props.data, (newData) => {if (newData && newData.length) {state.value = newData;} else {state.value = [];}
}, { deep: true });
</script>

解析：

data 是一个二维数组，每一条数组表示一条流程线，节点通过 node 表示，risk 表示风险等级。
getRiskClass 根据节点的风险等级返回不同的 CSS 类名，用于控制样式。

2. 样式设计

组件的样式部分为节点和箭头设计了动态的动画效果，增加了大屏展示的视觉冲击力。不同的 risk 等级通过不同颜色和动画来区分。

.flow-container {display: flex;flex-direction: column;gap: 20px;
}.flow-line {display: flex;align-items: center;gap: 10px;
}.node-wrapper {position: relative;display: flex;align-items: center;
}.node {padding: 10px 20px;border-radius: 8px;background-color: rgba(0, 188, 212, 0.1);color: white;font-weight: bold;text-align: center;position: relative;border: 2px solid transparent;animation: glow 2s infinite alternate;
}.node::before {content: "";position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 8px;border: 2px solid transparent;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);animation: border-marquee 3s linear infinite, border-fade 2s infinite alternate;
}@keyframes glow {0% {box-shadow: 0 0 6px rgba(0, 188, 212, 0.5);}100% {box-shadow: 0 0 12px rgba(0, 188, 212, 1);}
}.risk-3::before {border-color: #19ef07;background: linear-gradient(90deg, transparent, rgba(42, 255, 23, 0.575), transparent);
}.risk-2::before {border-color: rgba(0, 188, 212, 1);background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.5), transparent);
}.risk-1::before {border-color: #b71c1c;background: linear-gradient(90deg, transparent, rgba(183, 28, 28, 0.5), transparent);
}.arrow-wrapper {display: flex;align-items: center;justify-content: center;flex-grow: 1;
}.arrow {width: 50px;height: 2px;background-color: #00bcd4;position: relative;
}

解析：

node 元素设置了光效和渐变动画，使其在大屏展示中更加引人注目。
arrow 元素为连接节点的箭头，使用了简单的样式和闪烁动画来模拟流动感。
risk 等级样式通过不同颜色来区分，增强了风险信息的可视化表现力。

如何在项目中使用

组件封装完成后，你可以在其他项目中非常简单地复用它。只需要将组件文件导入，并传入合适的 data 即可。

1. 引入组件

首先，将 FlowLine.vue 文件复制到你的项目的 components 文件夹中。然后在需要的页面中引入这个组件：

<template><FlowLine :data="flowData" />
</template><script setup>
import FlowLine from '@/components/FlowLine.vue';const flowData = [[{ label: '节点 1', risk: 1 },{ label: '节点 2', risk: 2 },{ label: '节点 3', risk: 3 }],[{ label: '节点 A', risk: 3 },{ label: '节点 B', risk: 2 }]
];
</script>