@tanzhenxing/zx-turntable NPM

zx-turntable 转盘抽奖

一个可配置的转盘抽奖组件，支持 H5、小程序和 App。

使用方法

<template>
  <view>
    <zx-turntable
      ref="turntable"
      :rewardNames="rewards"
      :rewardBGColors="bgColors"
      :rewardColors="textColors"
      :turns="5"
      :duration="6000"
      @end="onLotteryEnd"
    />
    <button @click="startLottery">开始抽奖</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const turntable = ref(null);
const rewards = ref(['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6']);
const bgColors = ref(['#FFDF88', '#FFF1C4', '#FFDF88', '#FFF1C4', '#FFDF88', '#FFF1C4']);
const textColors = ref(['#C70000', '#8C0000', '#C70000', '#8C0000', '#C70000', '#8C0000']);

const startLottery = () => {
  if (turntable.value && !turntable.value.isSpinning) {
    const randomIndex = Math.floor(Math.random() * rewards.value.length);
    turntable.value.spinTo(randomIndex);
  }
};

const onLotteryEnd = (index) => {
  console.log('抽奖结束，中奖索引:', index, '奖品为:', rewards.value[index]);
  uni.showToast({
    title: `恭喜你抽中：${rewards.value[index]}`,
    icon: 'none'
  });
};
</script>

API

Props

属性名	类型	默认值	说明
rewardNames	Array	`['', '', '', '', '', '']`	奖品名称数组
rewardBGColors	Array	`[]` (内部有默认颜色)	奖品扇区背景颜色数组，数量不足时循环使用默认颜色
rewardColors	Array	`[]` (内部有默认颜色)	奖品文字颜色数组，数量不足时循环使用默认颜色
fontSize	String	`'32rpx'`	奖品文字大小
turns	Number	`6`	转盘转动圈数
duration	Number	`5000`	转盘转动时间 (毫秒)

Events

事件名	回调参数	说明
end	`index`	抽奖结束时触发，返回中奖奖品的索引

Methods

通过 ref 获取组件实例后，可以调用以下方法：

方法名	参数	说明
init	-	初始化转盘（通常在 `onMounted` 后自动调用）
spinTo	`targetIndex`	转动到指定的奖品索引
isSpinning	- (getter)	返回一个布尔值，表示转盘当前是否正在转动

注意事项

奖品数量至少为2个，建议为偶数个，以获得更好的视觉效果。
rewardBGColors 和 rewardColors 数组的长度如果小于 rewardNames 的长度，组件会使用内置的默认颜色进行补充。
确保在调用 spinTo 方法前，转盘已经初始化完成（通常是自动的）。
spinTo 方法的 targetIndex 参数必须是 rewardNames 数组中的有效索引。

zx-turntable 转盘转盘组件转盘组件

1 month ago

2 months ago

11 months ago