vue-H5 轮盘游戏抽奖

Z时代
2024-01-10
分类：综合

vue

vue-H5 轮盘游戏抽奖插件版ad个人写的dome

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