这个组件展示了一系列带有节点和箭头连接的流程线，并具备不同风险等级的样式和动画效果，非常适合大屏展示项目。
功能概述
这个流程线组件具备以下功能：
- 动态渲染：根据传入的数据，组件可以自动生成节点和箭头。
- 风险等级样式：不同的节点根据风险等级（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>
2. 数据结构
flowData 是一个二维数组，每个子数组代表一条流程线，数组中的每个对象代表一个节点，并包含 label 和 risk 字段。label 是节点的显示文本，risk 是风险等级（1-3）。
总结
通过将这个流程线组件封装成一个独立的 Vue 3 组件，你可以在不同项目中轻松复用它，并根据需求动态更新显示的数据。组件不仅支持动态渲染，还具备动画效果和风险等级区分，特别适合用于大屏数据可视化展示。你可以根据项目的具体需求进一步调整样式和功能，使其更加灵活。
希望这篇博客对你封装和复用 Vue 组件有所帮助，期待你在项目中实现更多酷炫的效果！