Lucky Draw
Interactive marketing component for e-commerce campaigns. It supports wheel and grid modes, custom prize rendering, and theme variable overrides.
Wheel Mode
Use type="wheel" to render a spinning prize wheel. When all prizes are pure text, the component automatically switches to its pure-text layout.
Grid Mode
Use type="grid" to render a 3x3 lottery grid. The center area is the start button, and surrounding cells highlight in sequence until the target prize is reached.
Usage in Nuxt
YhLuckyDraw can be used directly in Nuxt 3/4 projects. Static structure renders on the server, while the draw animation starts after the target prize id is provided on the client.
SSR Notes:
- The component's static layout can be rendered during SSR.
- The actual draw animation starts only after
target-idreceives a valid value. - In normal usage, no extra
<ClientOnly>wrapper is required.
API
Props
| Property | Description | Type | Default |
|---|---|---|---|
| type | Draw mode | 'wheel' | 'grid' | 'wheel' |
| prizes | Prizes array | LuckyPrize[] | [] |
| loading | Async loading operation state mapping indicator | boolean | false |
| target-id | Outcome ID (starts animation sequentially when resolved) | string | number | '' |
| rounds | Minimum rotations | number | 8 |
| duration | Animation time (ms) | number | 4000 |
| size | Container bounds mapping | number | string | 300 |
| action-text | Action button text override | string | '' |
| hide-btn | Hide built-in button | boolean | false |
| theme-overrides | Theme variables object dictionary | Record<string, string> | {} |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| click | Triggered on component interaction phase, optimal for silent backend request chains | (e: MouseEvent) |
| start | Triggered precisely at absolute rotation begin | () |
| finish | Fired when spinning concludes over resolved reward target | (prize: LuckyPrize) |
Slots
| Slot | Description | Parameters |
|---|---|---|
| prize | Custom prize cell | { prize: LuckyPrize } |
| action | Custom start button area | - |
Expose
This component does not expose public instance methods or properties.
Theme Variables
Use the following theme variables to override the component's core visual styles:
| Variable Name | Description | Default Standard |
|---|---|---|
--yh-lucky-primary | Primary accent color | #ff4757 |
--yh-lucky-border-bg | Outer container background | linear-gradient(180deg, #ff8a65 0%, #ff5252 100%) |
--yh-lucky-shadow | Outer shadow | 0 10px 25px rgba(255, 82, 82, 0.3) |
Type Exports
| Name | Description |
|---|---|
YhLuckyDrawProps | Component props type |
YhLuckyDrawEmits | Component emits type |
YhLuckyDrawSlots | Component slots type |
YhLuckyPrize | Prize data type |
YhLuckyDrawType | Draw mode union |
YhLuckyDrawInstance | Component instance type |