ant-mini-wheel
转盘玩法组件使用文档
Installation
npm install ant-mini-wheel --save
Usage
init
- json
{"usingComponents": {"wheel": "ant-mini-wheel/es/wheel/index"}}
- js
;
- xaml
你还有{{totalTimes - curTimes}}次抽奖机会 {{result}}
Config Options
属性 | 类型 | 默认值 | 含义 |
---|---|---|---|
width | Number | 300 | 转盘容器宽度【必填】,默认单位 px |
initDeg | Number | 0 | 转盘初始化角度旋转偏移【选填】,单位 reg |
rotTimes | Number | 1 | 抽奖机会次数【选填】,当抽奖次数大于该值时不可再抽奖 |
prizeList | Array | [] | 奖品列表【必填】,长度为6,每一项必须包含img(奖品图片) 和 name(奖品名字) |
prizeName | String | '' | 中奖的奖品名字【必填】,值需要存在于 prizeList 的 name 字段中 |
prizeWidth | Number | 80 | 奖品图片宽度【选填】,默认单位 px,插件会根据 width 选项值自动计算,建议不填 |
prizePaddingTop | Number | 20 | 奖品图片距圆弧的内边距【选填】,默认单位 px,插件会根据 width 选项值自动计算,建议不填 |
bgImg | String | 背景图片src | 转盘扇面背景图地址【选填】 |
btnImg | String | 按钮图片 src | 转盘按钮背景图地址【选填】 |
onStart | Function | (name, times) => {} | 旋转开始回调【选填】,name:中奖项name,times:当前是第几次旋转 |
onFinish | Function | (name, times) => {} | 旋转结束回调【选填】,name:中奖项name,times:当前是第几次旋转 |
prizeWidth 每一个扇形区的奖品图片宽度,插件自动计算
prizePaddingTop 每一个扇形区的奖品图片距离圆弧的内边距
以上两个选项当效果不佳时可以自定义,直接传入数字默认单位为px,需自定义单位可以传入字符串,如2em
initDeg
参数视觉效果示例
bgImg(转盘背景图示例) | initDeg(旋转的角度) |
---|---|
initDeg 为0或不填 |
initDeg 为30 |
Preview
打开浏览器,即可看到效果