Lucky Draw 营销抽奖

用于电商营销活动的高级互动组件。融合了极具现代感的横/竖排版自适应策略与深度渲染特效。

大转盘模式 (Wheel)

旗舰级大转盘体验。带有 外圈 LED 跑马点缀，以及在纯文案与图文模式下自动切换横向及切线/放射状排版的功能。

苹果电脑

💻

iPhone 15

📱

五十元红包

🎁

谢谢参与

😢

10积分

💰

蓝牙耳机

🎧

京东卡

🎫

充电宝

🔋

开始抽奖

高级图文示例

特等奖

一等奖

二等奖

三等奖

参与奖

幸运奖

安慰奖

惊喜奖

开始抽奖

纯文字极简模式

九宫格模式 (Grid)

带有晶莹剔透色彩的经典九宫格。完美规范了多行与单行文本情况下的等距对齐体验，使得图标重心永远在一条水平线上。选中时带有饱满的高亮背景态。

💻

苹果电脑

📱

iPhone 15

🎁

五十元红包

😢

谢谢参与

💰

10积分

🎧

蓝牙耳机

🎫

京东卡

🔋

充电宝

开始抽奖

九宫格展示

在 Nuxt 中使用

YhLuckyDraw 组件针对 Nuxt 3/4 的 SSR (Server-Side Rendering) 服务端渲染做了高帧兼容处理，其 DOM 结构（扇形布局与文本流）完全能在服务端进行直出渲染供爬虫与首屏引擎极速解析。所有的物理动画坐标运算自动降级安全移交至浏览器客户端执行，因此无需包装 <ClientOnly> 且绝对不会产生由动画引致的 Hydration Mismatch 警告。

苹果电脑

💻

iPhone 15

📱

五十元红包

🎁

谢谢参与

😢

10积分

💰

蓝牙耳机

🎧

京东卡

🎫

充电宝

🔋

开始抽奖

Nuxt 安全渲染示范

SSR 注意事项：

• ✅ 首屏直出：DOM 以及全部静态图片、纯文本图文能实现无等待预渲染。
• ✅ 自动客户端侦听：您可随时给 target-id 赋响应式的新值，底层 requestAnimationFrame 无阻断监听。
• ✅ 样式矩阵隔离：扇叶颜色的混合采用内联绑定形式，规避了不同服务端环境引发的样式篡改。

API

Props

属性名	说明	类型	默认值
type	抽奖模式	'wheel' | 'grid'	'wheel'
prizes	奖品列表	LuckyPrize[]	[]
loading	加载状态，用于无缝对接异步 API 请求	boolean	false
target-id	中奖 ID (一旦捕获非空值即触发安全转动)	string | number	''
rounds	最低完整旋转圈数	number	8
duration	转盘物理滞停及弹性动画总时长 (ms)	number	4000
size	整体尺寸挂载，自适应响应或像素值	number | string	300
action-text	前侧主按钮显示文案覆写	string	''
hide-btn	全盘隐藏内轴引擎触发按钮	boolean	false
theme-overrides	单实例 CSS 主题覆盖接口	object	—

Events

事件名	说明	参数
click	核心抽奖按钮被点击的瞬间（此时适合静默调用服务端接口）	(e: MouseEvent)
start	组件正式开始渲染初速度动效前抛出	()
finish	物理碰撞检测停转，获得开奖奖品实体对象时回调	(prize: LuckyPrize)

Slots

插槽名	说明	参数
prize	自定义奖品单元格	{ prize: LuckyPrize }
action	自定义开始按钮	—

Expose

当前组件未暴露公开实例方法或属性。

主题变量

通过 theme-overrides 可覆盖以下核心 CSS 变量，用于自定义转盘与九宫格模式的主视觉：

变量名	说明	首发行业标准默认值
--yh-lucky-primary	指针前端、点击按钮外圈边框与激活高光红的主色	#ff4757
--yh-lucky-border-bg	转盘整体防切边大底盘背景色（支持线性格段渲染 linear-gradient 色系）	linear-gradient(180deg, #ff8a65 0%, #ff5252 100%)
--yh-lucky-shadow	大转盘自身及九宫格外部光晕景深阴影色值	0 10px 25px rgba(255, 82, 82, 0.3)

类型导出

名称	说明
YhLuckyDrawProps	组件 Props 类型
YhLuckyDrawEmits	组件事件类型
YhLuckyDrawSlots	组件插槽类型
YhLuckyPrize	奖品数据类型
YhLuckyDrawType	抽奖模式联合类型
YhLuckyDrawInstance	组件实例类型