数据大屏：封装带装饰性边框的内容容器（ItemWrap）
在大屏数据可视化项目中，每个数据模块（比如设备总览、报警统计、区域分布）都需要装饰性边框、统一的标题栏、标准化的内间距和布局，如果每个模块都重复写这些代码，不仅开发效率低，还会导致样式不统一、后期维护困难。因此我封装了 ItemWrap 带装饰性边框的内容容器组件，它是项目中使用频率最高的通用 UI 组件（占所有组件使用次数的 80%），也是支撑组件复用率 80%、开发效率提升 40% 的核心。这个组件的核心思路是 “抽离重复的 UI 逻辑，保留个性化扩展入口”，让业务开发只需要关注模块的核心内容，无需关心布局和装饰样式。
第一部分：组件的核心实现（从 Props 到插槽，结合代码）
我把组件封装分为基础依赖引入、Props 设计、插槽设计、模板与样式封装四个步骤，每个步骤配合代码说明（基于 Vue3 + TS + SCSS）：
1. 步骤 1：引入基础依赖（DataV 装饰边框 + Vue 核心 API）
大屏项目的装饰性边框使用了 DataV 的可视化边框组件（如 borderBox13、borderBox8 等），因此组件首先引入这些依赖，并初始化 Vue 的核心 API：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 组件模板后续讲解 -->
</template>
<script setup lang="ts">
import { defineProps, withDefaults, ref, watch } from 'vue';
// 引入DataV的装饰性边框组件（按需引入，减小体积）
import { BorderBox1, BorderBox8, BorderBox13 } from '@jiaminghi/data-view';
// 定义边框类型的联合类型，约束Props的取值
type BorderType = 'borderBox1' | 'borderBox8' | 'borderBox13' | 'none';
</script>
<style lang="scss" scoped>
// 组件样式后续讲解
</style>
步骤 2：Props 设计（兼顾通用性和个性化）
Props 是组件的 “输入口”，设计遵循 “默认配置保证统一，扩展配置支持个性化”的原则，分为**基础配置、样式配置、功能配置 ** 三类：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
interface ItemWrapProps {
// 基础配置：模块标题、边框类型、是否显示标题
title: string;
borderType: BorderType;
showTitle: boolean;
// 样式配置：自定义容器样式、标题样式、自定义类名（支持外部样式覆盖）
containerStyle?: CSSProperties;
titleStyle?: CSSProperties;
customClass?: string;
// 功能配置：标题点击事件、加载状态（统一加载样式）
onTitleClick?: () => void;
loading: boolean;
}
// 设置Props默认值，满足大部分场景的默认需求
const props = withDefaults(defineProps<ItemWrapProps>(), {
title: '默认模块',
borderType: 'borderBox13', // 项目中最常用的边框类型
showTitle: true,
containerStyle: () => ({}),
titleStyle: () => ({}),
customClass: '',
onTitleClick: () => {},
loading: false,
});
步骤 3：插槽设计（灵活承载业务内容，支持个性化扩展）
插槽是组件的 “内容出口”，设计遵循 “默认插槽承载核心内容，具名插槽支持局部自定义，作用域插槽传递内部状态” 的原则，覆盖 99% 的业务场景：
1 | <template> |
