vbw

vue-big-wheel

Vue大转盘抽奖组件,奖品数量/颜色样式等都可配置,奖品展示可自定义文字、图片还是其它什么你说了算

Showing:

Popularity

Downloads/wk

4

GitHub Stars

32

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

8.0KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-big-wheel

vue-big-wheel是一款基于Vue2.x封装的转盘抽奖组件,支持多种配置选项,灵活适用各种场景,且不依赖任何框架,非常小,开箱即用

移动端、PC端页面都能使用

版本说明

npm最新的包是1.x版本,1.x版本完全不兼容0.x,使用0.x版本的注意1.x不兼容0.x,1.x版本代码新增配置奖品图片且使用eslint规范代码且代码逻辑更清晰,比0.x配置更简化且更灵活。

1.x版本为了让指针更好的自定义就没带转盘指针,转盘指针需要自行放置,1.x只渲染转盘

传送到0.x版本

安装

npm i vue-big-wheel -S

使用

在代码中引用,然后使用,参考demo代码 demo引用是直接引用本地组件import BigWheel from '@/components/BigWheel'

你们安装依赖后引用是import BigWheel from 'vue-big-wheel'

API

Props

参数说明类型默认值
width转盘的宽度String无默认值,必填
height转盘的高度String无默认值,必填
prizeList奖品列表Array-
prizeBgColors每个奖品扇形的背景色,扇形循环数组填充
建议和奖品列表同奇偶,如奖品数组长度是奇数,则背景色长度也要是奇数
Array['#F47F45', '#FFA468']
borderColor每一块扇形的外边框颜色String#ff9800
turnsNumber转动的圈数Number5
turnsTime转动持续时间Number5(单位是秒)

Slots

名称说明
item自定义每个奖品区域显示,参数为每个奖品信息{ item }

Events

事件名说明回调参数
over转盘停止转动后的回调函数中奖的奖品信息

方法

通过ref拿到组件实例并调用实例方法this.$refs.bigWheel.rotate(index)

方法名说明参数返回值
rotate转盘转动方法index:中奖奖品在奖品列表中的下标-

Demo

demo是做的手机端页面,电脑查看请用手机模式查看

https://wheel.assetss.cn/v1

手机扫描下面二维码查看

再贴张效果图镇楼😂

最后

有问题或者需求等欢迎提Issues,走过路过,点个Star再走呗

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100