[前端]可折叠容器组件、信息展示卡片组件

分享两个Web前端组件，均为可折叠的内容展示组件，基于Vue3、ElementPlus框架。

可折叠容器组件

组件Vue源码

<!--
  * 可折叠容器组件
  * 
  * Author: GFire
  * Date: 2026/03/23
-->
<template>
  <div class="box-container">
    <div class="title" @click="isCollapse = !isCollapse">
      <el-icon style="margin: 0 5px">
        <ArrowUpBold v-if="isCollapse" />
        <ArrowDownBold v-else />
      </el-icon>
      {{ title }}
    </div>
    <el-collapse-transition>
      <div v-show="!isCollapse" :class="contentContainerClass || 'content-container'">
        <!-- 内容区域默认插槽 -->
        <slot></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = withDefaults(
  defineProps<{
    /**
     * 标题文字
     */
    title?: string;
    /**
     * 内容区域样式class名（用于自定义样式）
     */
    contentContainerClass?: string;
  }>(),
  {
    title: '',
  },
);

// 是否折叠
const isCollapse = ref(false);
</script>

<style scoped>
.box-container {
  border: 1px solid #ececef;
  border-radius: 4px;
}

.title {
  background-color: #f7f8fb;
  padding: 5px;
  border-bottom: 1px solid #ececef;
  cursor: pointer;
}

.content-container {
  padding: 10px;
}
</style>

组件使用示例

使用代码：

<template>
  <CollapseBox title="张雪820RR资料" style="width: 600px" content-container-class="collapseContent">
    <div>
      张雪820RR搭载张雪机车自研的820cc直列三缸发动机，最大功率99kW，最大扭矩80N·m，零百加速仅需2.81秒，极速高达280km/h。结合其43800元的售价来看，性价比简直爆棚，毕竟价格贵了快三倍的杜卡迪V2也没有如此炸裂的性能。不过张雪820RR最硬核的并非参数，而是背后的技术实力。
    </div>
  </CollapseBox>
</template>

<style scoped>
/* 自定义内容区域的样式 */
:deep(.collapseContent) {
  padding: 15px;
}
</style>

解释：

1. title为标题
2. content-container-class为内容区域样式class名（用于自定义样式）
3. 内容区域默认展开，点击标题区域切换折叠/展开状态。

显示效果：

折叠效果：

信息展示卡片组件

组件Vue源码

<!--
  * 基础组件：信息展示卡片
  * 
  * Author: GFire
  * Date: 2024/10/25
-->
<template>
  <el-card shadow="hover">
    <template #header>
      <div class="header">
        <div class="title" :style="getTitleStyle()">
          {{ props.title }}
        </div>
        <el-button @click="visible = !visible" :icon="visible ? 'Minus' : 'Plus'" text type="primary" size="small"></el-button>
      </div>
    </template>
    <!-- 卡片内容插槽 -->
    <el-collapse-transition>
      <div v-show="visible">
        <slot></slot>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { CSSProperties } from 'vue';

const props = withDefaults(
  defineProps<{
    title: string;
    titleSize?: number | string; // 标题字体大小, 传数字时单位为px, 传字符串时原样赋值
  }>(),
  {
    titleSize: 16,
  },
);

const visible = ref(true);

function getTitleStyle(): CSSProperties {
  return {
    fontSize: getTitleSize(),
  };
}

function getTitleSize() {
  const size = props.titleSize;
  if (typeof size === 'number') {
    return size + 'px';
  } else {
    return size;
  }
}
</script>

<style scoped>
:deep(.el-card__header) {
  padding: 10px;
}

:deep(.el-card__body) {
  padding: 12px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  border-left: 7px solid var(--el-color-primary);
  padding: 3px 10px;
  font-weight: bold;
}
</style>

组件使用示例

使用代码：

<template>
  <InfoCard title="张雪820RR资料" style="width: 600px">
    <div>
      张雪820RR搭载张雪机车自研的820cc直列三缸发动机，最大功率99kW，最大扭矩80N·m，零百加速仅需2.81秒，极速高达280km/h。结合其43800元的售价来看，性价比简直爆棚，毕竟价格贵了快三倍的杜卡迪V2也没有如此炸裂的性能。不过张雪820RR最硬核的并非参数，而是背后的技术实力。
    </div>
  </InfoCard>
</template>

显示效果：

点击右上角的“-”按钮可以折叠，效果：

再点击右上角的“+”按钮则展开