Venler / vue-lottery

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

Home Page:https://venler.github.io/demo/vue-lottery/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 内外圈间距百分比

About

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

https://venler.github.io/demo/vue-lottery/index.html


Languages

Language:JavaScript 90.8%Language:Vue 8.0%Language:HTML 1.2%