转盘抽奖Vue组件,原创组件,持续更新中

vue-lottery

在线演示地址: https://venler.github.io/demo/vue-lottery/index.html

How To Use

ES6

npm install vue-lottery --save

import lottery from 'vue-lottery' Vue.use(lottery) 调用示例

<lottery @lotteryClick="lotteryClick" @lotteryDone="lotteryDone" :lottery-start="0" :lottery-prizenum="8" :lottery-prizeno="1" lottery-bg="https://venler.github.io/demo/vue-lottery/dist/turnplate-bg.png" content-bg="https://venler.github.io/demo/vue-lottery/dist/turntable.png" pointer-bg="https://venler.github.io/demo/vue-lottery/dist/pointer.png" :lottery-width="['85%','35%']" /> props说明

参数名 参数类型 解释 是否必传
lottery-prizenum Number 奖品总数量
lottery-prizeno Number 从起点开始逆时针算,中奖的是第几个
lottery-bg String 背景图
content-bg String 内容区域背景图
pointer-bg String 指针背景图
lottery-start Number 0为停止,1为开始转动
lotteryDone Function 旋转完成后的回调函数
lotteryClick Function 点击抽奖按钮的回调
lottery-width String 内外圈间距百分比

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。