Vue 组件插槽如何实现大转盘抽奖组件中奖品格子内容的自定义渲染

Vue大转盘通过作用域插槽#prize="{prize, index}"透出奖品数据，父组件可自定义每个格子的图标、文字、角标、动效等；需v0.1.10+版本支持，注意手动处理背景、样式及响应式。

Vue 组件插槽实现大转盘中奖品格子的自定义渲染，核心在于利用 作用域插槽（scoped slot） 将奖品数据透出，让父组件按需控制每个格子的展示内容 —— 比如图标+文字、动效标签、倒计时提示，甚至带按钮的“立即领取”模块。

1. 基于 lucky-canvas 的插槽支持

当前主流方案（如 @lucky-canvas/vue v0.1.13+）已原生支持作用域插槽。它在 <LuckyWheel> 组件内部为每个 prize 区域提供 prize 插槽，并将当前奖品对象作为参数传递：

1. prizes 数组中每个项（如 { id: 1, name: '50元券', background: '#ff6b6b' }）会作为插槽 props 传入
2. 插槽名固定为 #prize="{ prize, index }"，其中 index 是当前格子序号（从 0 开始）
3. 插槽内可自由使用 prize.name、prize.id，也可结合 index 做奇偶样式或特殊位置高亮

2. 父组件中自定义格子内容示例

在使用转盘的页面中，这样写即可替换默认文字渲染：

<LuckyWheel :prizes="prizes" ...><template #prize="{ prize, index }"><div class="prize-cell" :class="{ 'special': index === 0 }"><img :src="getPrizeIcon(prize.id)"class="icon"><div class="name">{{ prize.name }}</div><div v-if="prize.isHot" class="hot-badge">? 热门</div></div></template></LuckyWheel>

配合简单 CSS 控制尺寸与居中，就能实现图标+文字+角标组合；getPrizeIcon() 可返回预设 icon 地址或根据 prize.id 动态映射。

3. 高级用法：动态加载与条件渲染

插槽内可嵌套异步逻辑，例如对“实物奖品”显示“待发货”，对“虚拟奖品”显示“立即到账”状态：

1. 用 v-if/v-else 区分奖品类型：v-if="prize.type === 'virtual'"
2. 调用 useAsyncData 或 computed 获取用户该奖品的领取状态
3. 对特定格子（如 index === 3）插入 SVG 动画或徽章元素，无需修改子组件源码

4. 注意事项

插槽内容会完全覆盖组件默认绘制的文本和背景色，因此需要自行处理：

1. 每个格子宽高由 width/height 和奖品数量自动均分，插槽容器默认撑满对应扇形区域
2. 若需保留原始渐变背景，可在插槽根元素上添加 :style="{ background: prize.background }"
3. 字体颜色、大小、行高需手动设置，不继承父级；建议统一用 CSS 类管理
4. 移动端需注意图片缩放和文字折行，推荐用 flex + text-overflow + font-size: clamp() 适配多端

不复杂但容易忽略：插槽生效前提是使用的 lucky-canvas 版本 ≥ 0.1.10，且未禁用 prizeRender 配置项（默认开启）。旧版需升级或改用 prizeRender 函数式渲染替代。