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

news2024/9/20 21:02:23

在这里插入图片描述

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

功能概述

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

动态渲染：根据传入的数据，组件可以自动生成节点和箭头。
风险等级样式：不同的节点根据风险等级（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>