Turntable 大转盘

参考本地 nutui-bingo-dev 的基础 demo,实现大转盘抽奖展示。

演示

9:41

代码示例

<re-turntable ref="turntableRef" class="demo-page__turntable" width="300px" height="300px" :prizeList="prizeList" :prizeIndex="prizeIndex" :turnsNumber="turnsNumber" :turnsTime="turnsTime" :styleOpt="styleOpt" :pointerStyle="pointerStyle" @startTurns="handleStartTurns" @end="handleEndPrize" ></re-turntable>

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-turntable />。

API

Turntable Props

名称类型默认值描述必传
visiblebooleantrue-N
widthstring'300px'-N
heightstring'300px'-N
prizeListArray<UTSJSONObject> as Array<UTSJSONObject>-N
prizeIndexnumber-1-N
turnsNumbernumber5-N
turnsTimenumber5-N
lockTimenumber0-N
styleOptUTSJSONObject | nullnull-N
pointerStyleUTSJSONObject | nullnull-N
customStylestring''自定义样式N

Turntable Events

名称参数描述
startTurns--
endTurns--
lockTurns--
start--
endprize: string-

Turntable Slots

名称描述
--