vue-H5 轮盘游戏抽奖
安装配置
插件版 文档地址
npm install vue-luck-draw
//main.js
import LuckDraw from "vue-luck-draw";
Vue.use(LuckDraw);
大转盘搭建
<template>
<LuckyWheel
ref="LuckyWheel"
width="300px"
height="300px"
:prizes="prizes"
:default-style="defaultStyle"
:blocks="blocks"
:buttons="buttons"
@start="startCallBack"
@end="endCallBack"
/>
</template>
<script>
export default {
data () {
return {
prizes: [],
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',
imgs: [{ src: require('./img/button.png'), width: '65%', top: '-50%' }]
}
],
}
},
mounted () {
this.getPrizesList()
},
methods: {
getPrizesList () {
this.prizes = []
let data = ['1元红包', '100元红包', '0.5元红包', '2元红包', '10元红包', '50元红包', '0.3元红包', '5元红包']
data.forEach((item, index) => {
this.prizes.push({
title: item,
background: index % 2 ? '#f9e3bb' : '#f8d384',
fonts: [{ text: item, top: '10%' }],
imgs:[{ src: require(`./img/${index}.png`), width: '30%', top: '35%' }],
})
})
},
startCallBack () {
this.$refs.LuckyWheel.play()
setTimeout(() => {
this.$refs.LuckyWheel.stop(Math.random() * 8 >> 0)
}, 3000)
},
endCallBack (prize) {
alert(`恭喜你获得${prize.title}`)
},
}
}
</script>
配置项
边框
padding:string background:string
<LuckyWheel width="200px" height="200px" :blocks="blocks" />
data () {
return {
blocks: [
{ padding: '10px', background: '#ffc27a' },
{ padding: '10px', background: '#ff4a4c' },
{ padding: '0px', background: '#fff' }
]
}
}