Appearance
- default
- chenghua
- shijingshan
- sybz
- gulou
无数据
卡片组件
Hidden Title
基础用法：
<SCard title="基础用法"></SCard>属性事件插槽简介
基础用法
阴影和 Hover 动画（shadow 默认值 never，hoverAnimation 默认值 false）
透明背景（transparent 默认值 false）
主题（theme 默认值：default）
展开和收缩
size 内边距（默认值 default）
自适应高度
slot插槽
body正方形
合并区块间距（mergeSections 默认值 false）
副标题与右侧文字（subTitle / extra 默认值：空字符串）
在默认头部直接传入字符串。基础写法：<SCard title="服务概览" sub-title="实时数据" extra="查看详情">卡片内容</SCard>。
API
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
v-model / modelValue | 折叠状态，true 表示收起 | boolean | false |
size | 内边距尺寸，支持预设值或可被 processWidth 处理的 padding 值 | small / default / large / string / number | default |
height | 卡片外层高度；设置后内容区在固定高度内滚动 | string / number | '' |
title | 默认头部标题，传入后会使用 s-title 渲染 | string | '' |
subTitle | 默认头部副标题，传给 s-title | string | '' |
extra | 默认头部右侧文字，传给 s-title | string | '' |
hoverAnimation | 鼠标移入容器时是否启用轻微上浮动画 | boolean | false |
shadow | 阴影显示时机，语义同 Element Plus Card | always / never / hover | never |
boxStyle | 最外层容器样式 | object | {} |
headerStyle | 头部区域样式 | object | {} |
bodyStyle | 内容区域样式 | object | {} |
footerStyle | 底部区域样式 | object | {} |
transparent | 是否使用透明容器背景，同时去掉容器边框和阴影 | boolean | false |
border | 是否显示头部下边框 | boolean | true |
mergeSections | 是否去掉头部、底部分割线，并合并相邻区块的上下间距 | boolean | false |
scroll | 内容区是否自动撑开并滚动 | boolean | true |
square | 卡片内容区按宽高最大值渲染为正方形 | boolean | false |
collapsible | 是否允许点击头部展开/收起 | boolean | false |
collapseTrigger | 折叠触发区域 | icon / header | header |
theme | 主题样式 | default / chenghua / shijingshan / sybz | default |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:modelValue | 折叠状态变化时触发 | (collapsed: boolean) |
插槽
| 插槽名 | 说明 |
|---|---|
default | 内容区域 |
header | 自定义头部，会覆盖默认的 title、subTitle 和 extra |
icon | 自定义折叠图标 |
footer | 底部区域 |
说明
- 用于构建业务卡片容器，支持展开收起、插槽、自适应高度等常见场景。
- 只有设置
collapsible后才允许展开 / 收起；默认点击右侧图标触发，如需整块头部可点击，可设置collapseTrigger="header"。 header插槽默认会自动占满头部剩余宽度；开启collapsible后，右侧会为折叠图标预留空间，不需要额外手写width: 100%。scroll为true时内容区会设置flex: 1和overflow: auto，适合放在固定高度容器中。