# [luck-draw](https://100px.net/)
# vue-luck-draw
【大转盘 / 九宫格】抽奖
## 安装
~~~shell
// npm 安装：
npm install vue-luck-draw
// yarn 安装：
yarn add vue-luck-draw
~~~
## 加载
### vue2
~~~js
/ 完整加载
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)
// 按需引入
import { LuckyWheel, LuckyGrid } from 'vue-luck-draw'
Vue.components('LuckyWheel', LuckyWheel)
Vue.components('LuckyGrid', LuckyGrid)
~~~
### vue3
~~~js
// 完整加载
import LuckDraw from 'vue-luck-draw/vue3'
createApp(App).use(LuckDraw).mount('#app')
// 按需引入
import { LuckyWheel, LuckyGrid } from 'vue-luck-draw/vue3'
Vue.components('LuckyWheel', LuckyWheel)
Vue.components('LuckyGrid', LuckyGrid)
~~~
## 使用
~~~html
<template>
<div>
<!-- 大转盘抽奖 -->
<LuckyWheel
width="300px"
height="300px"
...你的配置
/>
<!-- 九宫格抽奖 -->
<LuckyGrid
width="300px"
height="300px"
...你的配置
/>
</div>
</template>
~~~
## 通过 script 标签引入
* **vue2.x：**[https://cdn.jsdelivr.net/npm/vue-luck-draw@3.4/dist/vue-luck-draw.umd.min.js(opens new window)](https://cdn.jsdelivr.net/npm/vue-luck-draw@3.4/dist/vue-luck-draw.umd.min.js)
* **vue3.x：**[https://cdn.jsdelivr.net/npm/vue-luck-draw@3.4/vue3/vue-luck-draw.umd.min.js](https://cdn.jsdelivr.net/npm/vue-luck-draw@3.4/vue3/vue-luck-draw.umd.min.js)
### 使用
~~~html
<div id="app">
<!-- 大转盘抽奖 -->
<lucky-wheel
width="300px"
height="300px"
...你的配置
/>
<!-- 九宫格抽奖 -->
<lucky-grid
width="300px"
height="300px"
...你的配置
/>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-luck-draw@3.4/vue3/vue-luck-draw.umd.min.js"></script>
<script>
new Vue({
el: '#app'
data () {
return {}
}
})
</script>
~~~
# 在 React 中使用
## 安装
~~~
// npm 安装：
npm install react-luck-draw
// yarn 安装：
yarn add react-luck-draw
~~~
## 使用
~~~js
import { LuckyWheel, LuckyGrid } from 'react-luck-draw'
export default function Test () {
return <div>
// 大转盘抽奖
<LuckyWheel width="300px" height="300px" ...你的配置></LuckyWheel>
// 九宫格抽奖
<LuckyGrid width="300px" height="300px" ...你的配置></LuckyGrid>
</div>
}
~~~
## DOME
~~~js
import React from 'react'
import { LuckyWheel } from 'react-luck-draw'
export default class App extends React.Component {
constructor () {
super()
this.myLucky = React.createRef()
this.state = {
blocks: [
{ padding: '13px', background: '#d64737' }
],
prizes: [
{ title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
{ title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
{ title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
{ title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
{ title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
{ title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
],
buttons: [
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px', background: '#ffdea0',
fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
}
],
defaultStyle: {
fontColor: '#d64737',
fontSize: '14px'
},
}
}
render () {
return <LuckyWheel
ref={this.myLucky}
width="300px"
height="300px"
blocks={this.state.blocks}
prizes={this.state.prizes}
buttons={this.state.buttons}
defaultStyle={this.state.defaultStyle}
onStart={() => { // 点击抽奖按钮会触发star回调
// 调用抽奖组件的play方法开始游戏
this.myLucky.current.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设拿到后端返回的中奖索引
const index = Math.random() * 6 >> 0
// 调用stop停止旋转并传递中奖索引
this.myLucky.current.stop(index)
}, 2500)
}}
onEnd={prize => { // 抽奖结束会触发end回调
console.log(prize)
alert('恭喜获得大奖:' + prize.title)
}}
></LuckyWheel>
}
}
~~~
# 微信小程序 中使用
## 安装
1. 先找到小程序项目的根目录，看是否有`package.json`文件，**如果没有就执行下面的命令**来创建该文件
~~~
npm init -y
~~~
2. 安装 npm 包
~~~
npm install mini-luck-draw
~~~
3. 构建 npm
`微信开发者工具`找到左上角点击`工具`\>`构建 npm`\>`构建成功`
4. 引入自定义组件
~~~json
{
"usingComponents": {
"lucky-wheel":"/miniprogram_npm/mini-luck-draw/lucky-wheel/index",
"lucky-grid":"/miniprogram_npm/mini-luck-draw/lucky-grid/index"
}
}
~~~
4. 我在这里提供一个简略的 demo 供你进行测试
~~~html
<view>
<lucky-wheel
id="myLucky"
width="500rpx"
height="500rpx"
blocks="{{blocks}}"
prizes="{{prizes}}"
buttons="{{buttons}}"
defaultStyle="{{defaultStyle}}"
bindstart="start"
bindend="end"
/>
</view>
~~~
~~~
const app = getApp()
Page({
data: {
prizes: [
{ title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
{ title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
{ title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
{ title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
{ title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
{ title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
],
defaultStyle: {
fontColor: '#d64737',
fontSize: '14px'
},
blocks: [
{ padding: '13px', background: '#d64737' }
],
buttons: [
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px', background: '#ffdea0',
fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
}
],
},
start () {
// 获取抽奖组件实例
const child = this.selectComponent('#myLucky')
// 调用play方法开始旋转
child.$lucky.play()
// 用定时器模拟请求接口
setTimeout(() => {
// 3s 后得到中奖索引
const index = Math.random() * 6 >> 0
// 调用stop方法然后缓慢停止
child.$lucky.stop(index)
}, 3000)
},
end (event) {
// 中奖奖品详情
console.log(event.detail)
}
})
~~~
# uni-app 中使用
当前 uni-app 中各端适配情况
* `H5端`：编译正常
* `微信小程序`：编译正常
* `qq小程序`：编译正常 (只能使用网络图片)
* `app端`：安卓测试正常, ios未测试 (但是不流畅, 有明显卡顿)
* `其他小程序`：未测试
## 安装
~~~
// npm 安装：
npm install uni-luck-draw
// yarn 安装：
yarn add uni-luck-draw
~~~
## 使用
~~~html
<template>
<view>
<!-- 大转盘抽奖 -->
<LuckyWheel
width="600rpx"
height="600rpx"
...你的配置
/>
<!-- 九宫格抽奖 -->
<LuckyGrid
width="600rpx"
height="600rpx"
...你的配置
/>
</view>
</template>
<script>
// npm 下载会默认到 node_modules 里面，直接引入包名即可
import LuckyWheel from 'uni-luck-draw/lucky-wheel' // 大转盘
import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格
// 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
// import LuckyWheel from '@/components/uni-luck-draw/lucky-wheel' // 大转盘
// import LuckyGrid from '@/components/uni-luck-draw/lucky-grid' // 九宫格
export default {
// 注册组件
components: { LuckyWheel, LuckyGrid },
}
</script>
~~~
## DOME
~~~html
<template>
<view>
<LuckyWheel
ref="luckyWheel"
width="600rpx"
height="600rpx"
:blocks="blocks"
:prizes="prizes"
:buttons="buttons"
:defaultStyle="defaultStyle"
@start="startCallBack"
@end="endCallBack"
/>
</view>
</template>
<script>
import LuckyWheel from 'uni-luck-draw/lucky-wheel'
export default {
components: { LuckyWheel },
data () {
return {
blocks: [
{ padding: '13px', background: '#d64737' }
],
prizes: [
{ title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
{ title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
{ title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
{ title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
{ title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
{ title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
],
buttons: [
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px', background: '#ffdea0',
fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
}
],
defaultStyle: {
fontColor: '#d64737',
fontSize: '14px'
},
}
},
methods: {
// 点击抽奖按钮触发回调
startCallBack () {
// 先开始旋转
this.$refs.luckyWheel.play()
// 使用定时器来模拟请求接口
setTimeout(() => {
// 3s后得到中奖索引
let index = Math.random() * 6 >> 0
// 缓慢停止游戏
this.$refs.luckyWheel.stop(index)
}, 3000)
},
// 抽奖结束触发回调
endCallBack (prize) {
// 奖品详情
console.log(prize)
}
}
}
</script>
~~~
# Taro 中使用
## 安装
~~~
// npm 安装：
npm install taro-luck-draw
// yarn 安装：
yarn add taro-luck-draw
~~~
## 使用
### Taro-vue
~~~html
<template>
<view>
<!-- 大转盘抽奖 -->
<LuckyWheel width="600rpx" height="600rpx" ...你的配置 />
<!-- 九宫格抽奖 -->
<LuckyGrid width="600rpx" height="600rpx" ...你的配置 />
</view>
</template>
<script>
import { LuckyWheel, LuckyGrid } from 'taro-luck-draw/vue'
export default {
components: { LuckyWheel, LuckyGrid },
}
</script>
~~~
### Taro-react
~~~js
import React from 'react'
import { View } from '@tarojs/components'
import { LuckyWheel, LuckyGrid } from 'taro-luck-draw/react'
export default class Index extends React.Component {
render () {
return <View>
{/* 大转盘抽奖 */}
<LuckyWheel width="300px" height="300px" ...你的配置 />
{/* 大转盘抽奖 */}
<LuckyGrid width="300px" height="300px" ...你的配置 />
</View>
}
}
~~~
## DMOE
### Taro-vue2
~~~
<template>
<view>
<LuckyWheel
ref="$lucky"
width="600rpx"
height="600rpx"
:prizes="prizes"
:blocks="blocks"
:buttons="buttons"
:defaultStyle="defaultStyle"
@start="startCallback"
@end="endCallback"
></LuckyWheel>
</view>
</template>
<script>
import { LuckyWheel } from 'taro-luck-draw/vue'
export default {
components: { LuckyWheel },
data () {
return {
blocks: [
{ padding: '13px', background: '#d64737' }
],
prizes: [
{ title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
{ title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
{ title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
{ title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
{ title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
{ title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
],
buttons: [
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px', background: '#ffdea0',
fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
}
],
defaultStyle: {
fontColor: '#d64737',
fontSize: '14px'
},
}
},
methods: {
// 点击抽奖按钮会触发star回调
startCallback () {
// 调用抽奖组件的play方法开始游戏
this.$refs.$lucky.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设拿到后端返回的中奖索引
const index = Math.random() * 6 >> 0
// 调用stop停止旋转并传递中奖索引
this.$refs.$lucky.stop(index)
}, 3000)
},
// 抽奖结束会触发end回调
endCallback (prize) {
console.log(`恭喜你获得${prize.title}`)
},
}
}
</script>
~~~
### Taro-vue3
~~~
<template>
<view>
<LuckyWheel
ref="$lucky"
width="600rpx"
height="600rpx"
:prizes="prizes"
:blocks="blocks"
:buttons="buttons"
:defaultStyle="defaultStyle"
@start="startCallback"
@end="endCallback"
></LuckyWheel>
</view>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { LuckyWheel } from 'taro-luck-draw/vue'
export default {
components: { LuckyWheel },
setup () {
const $lucky = ref(null)
const state = reactive({
blocks: [
{ padding: '13px', background: '#d64737' }
],
prizes: [
{ title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
{ title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
{ title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
{ title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
{ title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
{ title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
],
buttons: [
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px', background: '#ffdea0',
fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
}
],
defaultStyle: {
fontColor: '#d64737',
fontSize: '14px'
},
})
// 点击抽奖按钮会触发star回调
function startCallback () {
// 调用抽奖组件的play方法开始游戏
$lucky.value.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设拿到后端返回的中奖索引
const index = Math.random() * 6 >> 0
// 调用stop停止旋转并传递中奖索引
$lucky.value.stop(index)
}, 3000)
}
// 抽奖结束会触发end回调
function endCallback (prize) {
console.log(`恭喜你获得${prize.title}`)
}
return {
...toRefs(state),
startCallback,
endCallback,
$lucky
}
}
}
</script>
~~~
### Taro-react
~~~
import React from 'react'
import { LuckyWheel } from 'taro-luck-draw/react'
export default class Index extends React.Component {
constructor () {
super()
this.myLucky = React.createRef()
this.state = {
blocks: [
{ padding: '13px', background: '#d64737' }
],
prizes: [
{ title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
{ title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
{ title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
{ title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
{ title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
{ title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
],
buttons: [
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px', background: '#ffdea0',
fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
}
],
defaultStyle: {
fontColor: '#d64737',
fontSize: '14px'
},
}
}
render () {
return <LuckyWheel
ref={this.myLucky}
width="300px"
height="300px"
blocks={this.state.blocks}
prizes={this.state.prizes}
buttons={this.state.buttons}
defaultStyle={this.state.defaultStyle}
onStart={() => { // 点击抽奖按钮会触发star回调
// 调用抽奖组件的play方法开始游戏
this.myLucky.current.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设拿到后端返回的中奖索引
const index = Math.random() * 6 >> 0
// 调用stop停止旋转并传递中奖索引
this.myLucky.current.stop(index)
}, 2500)
}}
onEnd={prize => { // 抽奖结束会触发end回调
console.log(prize)
}}
></LuckyWheel>
}
}
~~~
