Product Card 商品卡片
专为现代电商业务设计的极高性能展示组件。支持网格、列表及紧凑布局，深度封装了营销角标系统、多价格策略、媒体增强、交互反馈及曝光埋点。
网格布局
店长推荐
YH-UI 智能前端开发套件
极速、高效、可扩展的 Vue 3 组件库，助力你打造完美的电商/AI 应用。
¥999.00
¥1299.00
网格布局 (Grid/Vertical)
列表布局
热卖
工业级 Gantt 组件
支持拖拽、视图缩放、高度可定制的甘特图，适用于项目管理系统。
¥1699.00
¥2500.00
列表布局 (Horizontal)
紧凑布局
紧凑模式展示
紧凑布局现在依然保留简易的操作按钮演示。
¥69.00
紧凑布局 (Compact)
库存进度
限量秒杀商品
¥299.00
¥399.00
已抢 60%
库存进度反馈
高级业务特性
针对电商核心业务逻辑的深度封装示例。
多路媒体与营销角标
店长推荐
极致营销角标展示
同时支持斜向 Ribbon 丝带和图片/文字 Badge 标签组。
¥1299.00
媒体切换与角标
价格逻辑、多媒体、状态管控
加购 Loading 演示
¥88.00
售罄
Sold Out 售罄效果
¥0.00
价格与状态反馈
标题与描述截断策略
这行商品标题非常非常非常长长长长长长长，会根据配置自动截断并在悬浮时显示 Tooltip
此段描述也会根据配置的行数进行截断处理，默认为 1 行截断显示省略号...
¥99.00
多行截断与 Tooltip
在 Nuxt 中使用
YhProductCard 支持 Nuxt 3/4 的 SSR 渲染。使用 @yh-ui/nuxt 模块时可自动导入；涉及 hover 视频预览、曝光埋点等仅客户端能力时，建议在 <ClientOnly> 或客户端生命周期中验证交互行为。
API
Props (100% 对齐源码)
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| image | 主图地址 | string | '' |
| hover-image | 悬浮切换主图地址 | string | '' |
| video-src | 悬浮播放视频地址 | string | '' |
| title | 商品标题 | string | '' |
| title-lines | 标题显示行数限制 | number | 2 |
| description | 商品描述 | string | '' |
| description-lines | 描述显示行数限制 | number | 1 |
| price | 当前销售价格 | number | string | 0 |
| market-price | 划线/参考价格 | number | string | '' |
| vip-price | 会员专属价格 | number | string | '' |
| vip-label | 会员价格标签文本 | string | '' |
| currency | 货币符号 | string | '¥' |
| unit | 价格计量单位后缀 | string | '' |
| ribbon | 营销角标丝带文本 | string | '' |
| ribbon-color | 丝带背景颜色 | string | '' |
| tag | 兼容性：单标签文本 | string | '' |
| tag-type | 兼容性：标签类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'danger' |
| badges | 标签组 (支持图文) | ProductBadge[] | [] |
| layout | 布局模式 | 'vertical' | 'horizontal' | 'compact' | 'grid' | 'vertical' |
| lazy | 图片懒加载 | boolean | true |
| border | 是否显示边框 | boolean | true |
| shadow | 是否显开启悬浮阴影 | boolean | true |
| readonly | 是否只读模式 (隐藏按钮) | boolean | false |
| stock-progress | 库存抢购进度 (0-100) | number | 0 |
| stock-color | 进度条颜色 | string | '' |
| stock-text | 进度条右侧文本 | string | '' |
| action-text | 操作按钮文本 | string | '' |
| action-loading | 按钮是否加载中 | boolean | false |
| sold-out | 是否售罄 | boolean | false |
| exposure | 开启自动曝光监听 | boolean | false |
| exposure-threshold | 曝光比例阈值 | number | 0.5 |
| exposure-once | 曝光成功后是否仅上报一次 | boolean | true |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击整个卡片触发 | (e: MouseEvent) |
| action | 点击操作按钮触发 | (e: MouseEvent) |
| expose | 命中曝光阈值时上报埋点 | () => void |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| title | 自定义标题区域 | — |
| description | 自定义描述区域 | — |
| footer | 自定义底部操作区域 | — |
Expose
当前组件未暴露公开实例方法或属性。
主题变量
当前组件支持 theme-overrides。如页面未单独列出完整 CSS 变量表，请优先以 theme-overrides 与全局主题令牌作为视觉定制入口。
ProductBadge 对象定义
ts
interface ProductBadge {
text?: string // 标签文案
image?: string // 标签图片 (如猫头/品牌logo)
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
color?: string // 自定义背景色
}类型导出
| 名称 | 说明 |
|---|---|
YhProductCardProps | 组件 Props 类型 |
YhProductCardEmits | 组件事件类型 |
YhProductCardSlots | 组件插槽类型 |
YhProductCardLayout | 布局模式联合类型 |
YhProductBadge | 商品角标类型 |
YhProductCardInstance | 组件实例类型 |