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\' }
]
}
}