# [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>
}
}
~~~
