taro-luck-draw 抽奖插件
一个基于 Taro 的 ( 大转盘 / 九宫格 ) 抽奖插件
官方文档 & Demo演示
中文：https://100px.net/usage/taro.html
English：If anyone can help translate the document, please contact me
ldq404@qq.com
在 js / jq 中使用 lucky-canvas
在 vue 中使用 vue-luck-draw
在 react 中使用 react-luck-draw
在 uni-app 中使用 uni-luck-draw
在 taro 中使用 taro-luck-draw
在 微信小程序 中使用 mini-luck-draw
在 Taro 中使用 安装
# npm 安装：
npm install taro-luck-draw
# yarn 安装：
yarn add taro-luck-draw
使用
点击查看 taro-vue2.x 示例 Demo
点击查看 taro-vue3.x 示例 Demo
taro-vue
<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 示例 Demo
taro-react
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>
}
}
vue2.x 示例 Demo
<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> vue3.x 示例 Demo
<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>
react 示例 Demo
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>
}
}
如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star ☜(ﾟヮﾟ☜)
推荐的开源项目
h5-Dooring 一款功能强大，高可扩展的H5可视化编辑器
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
