更新记录

1.0.0（2025-09-01） 下载此版本

• 多种卡片类型（基础、图文、数据统计等）
• 丰富的交互反馈（阴影、悬停、涟漪效果、加载状态）
• 高度灵活的样式配置和插槽
• 全平台兼容（H5、小程序、App）

平台兼容性

云端兼容性

uni-app(4.07)

uni-app x(4.07)

其他

hy-card-plus 增强型卡片组件

一个功能丰富、高度可定制的UniApp卡片组件。

特性

• 多种卡片类型（基础、图文、数据统计等）
• 丰富的交互反馈（阴影、悬停、涟漪效果、加载状态）
• 高度灵活的样式配置和插槽
• 全平台兼容（H5、小程序、App）

安装

1. 将 hy-card-plus 组件目录拷贝到您的 UniApp 项目的 components 目录下。
2. 在需要使用的页面或全局注册组件。

使用示例

<hy-card-plus title="标题" sub-title="副标题" cover="/static/example.jpg" cover-tag="New" @click="onClick">
  <text>这里是卡片内容</text>
  <template v-slot:actions>
    <button size="mini">按钮</button>
  </template>
</hy-card-plus>

📖 组件配置文档 (Props)

| 参数 | 类型 | 默认值 | 必填 | 说明 | type | String | 'basic' | 否 |卡片类型，可选 'basic', 'image', 'stats' | title | String | '' | 否 |卡片主标题 | subTitle | String | '' | 否 |卡片副标题 | cover | String | '' | 否 |封面图片 URL | coverTag | String | '' | 否 |封面角标文字 | coverTagType | String | 'error' | 否 |封面角标类型，可选 'primary', 'success', 'warning', 'error' | shadow | String | 'always' | 否 |阴影显示时机，可选 'always', 'hover', 'never' | border | Boolean | true | 否 |是否显示边框 | disabled | Boolean | false | 否 |是否禁用卡片 | hover | Boolean | true | 否 |是否开启点击悬停效果（非H5平台主要为active态） | loading | Boolean | false | 否 |是否显示加载状态 | loadingText | Object | { contentdown: '上拉显示更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据' } | 否 |加载状态文字配置 | ripple | Boolean | true | 否 |是否开启点击涟漪效果（App、H5支持较好） | rippleColor | String | 'rgba(0, 0, 0, 0.1)' | 否 |涟漪效果颜色 | customStyle | Object | {} | 否 |自定义卡片容器样式 | headerStyle | Object | {} | 否 |自定义头部样式 | bodyStyle | Object | {} | 否 |自定义内容体样式 | footerStyle | Object | {} | 否 |自定义底部样式 | coverStyle | Object | {} | 否 |自定义封面样式 | padding | String | '24rpx' | 否 |卡片内边距 | radius | String | '16rpx' | 否 |卡片圆角 | backgroundColor | String | '#FFFFFF' | 否 |卡片背景色

📖 事件 (Events)

| 事件名 | 参数 | 说明 | click | (e: Event) | 点击卡片时触发（禁用或加载状态不会触发） | cover-click | (e: Event) | 点击封面图时触发

📖 插槽 (Slots)

| 名称 | 说明 | default | 卡片主体内容 | cover | 自定义封面内容，覆盖 cover 属性 | cover-tag| 自定义封面角标，覆盖 coverTag 属性 | header | 自定义头部内容，覆盖 title 和 subTitle 属性 | footer | 自定义底部内容 | actions | 自定义底部操作区内容（通常放置按钮），需在 footer slot 内使用