更新记录

v0.1.0（2026-07-11） 下载此版本

首次上传

平台兼容性

uni-app(3.7.10)

幸运转盘组件 (lucky-wheel)

组件介绍

lucky-wheel 是一个幸运转盘组件，支持自定义奖品列表、旋转动画、中心按钮样式、中奖高亮闪烁、指针指示等功能，适用于抽奖营销场景。

组件属性

组件事件

组件插槽

暴露方法

内部类型定义

interface WheelPrize {
  prizeName: string
  imageUrl: string
  entryId?: string
  [key: string]: any
}

interface WheelSpinResult {
  prize: WheelPrize
  targetIndex: number
}

使用示例

<script setup lang="ts">
import { ref } from 'vue'
import type { WheelPrize, WheelSpinResult } from '@/components/ui/game/lucky-wheel.vue'

const wheelRef = ref()

const prizeList: WheelPrize[] = [
  { prizeName: '一等奖', imageUrl: '/static/prize-1.png' },
  { prizeName: '二等奖', imageUrl: '/static/prize-2.png' },
  { prizeName: '三等奖', imageUrl: '/static/prize-3.png' },
  { prizeName: '四等奖', imageUrl: '/static/prize-4.png' },
  { prizeName: '五等奖', imageUrl: '/static/prize-5.png' },
  { prizeName: '六等奖', imageUrl: '/static/prize-6.png' },
]

function handleStart() {
  // 模拟请求接口得到中奖索引
  const targetIndex = 2
  wheelRef.value.spin(targetIndex)
}

function handleEnd(result: WheelSpinResult) {
  console.log('中奖：', result.prize.prizeName)
}
</script>

<template>
  <lucky-wheel
    ref="wheelRef"
    :list="prizeList"
    :size="600"
    :duration="5"
    btn-text="抽奖"
    :dot-blink="true"
    :scroll-to-top-on-end="true"
    :show-pointer="true"
    @before-start="handleStart"
    @end="handleEnd"
  >
    <template #item="{ item }">
      <text>{{ item.prizeName }}</text>
      <image :src="item.imageUrl" mode="aspectFit" />
    </template>
  </lucky-wheel>
</template>

注意事项

1. list 为空或不传时，转盘默认显示 6 个空扇区，可通过 colors 自定义扇区颜色
2. 调用 spin() 前需确保不在旋转状态（isSpinning 为 false）
3. beforeStart 事件返回 false 可阻止本次旋转，常用于前置校验
4. scrollToTopOnEnd 为 true 时中奖奖品会旋转至正顶部，否则停在初始位置通过高亮闪烁标识
5. showPointer 仅在 scrollToTopOnEnd 为 true 时生效
6. 可通过 indexKey 指定奖品唯一标识字段，此时 spin() 参数传入该字段值而非索引

在线示例

完整示例及效果预览请访问：https://plum-ui.isixe.com/#/pages-example/wheel/index