幽灵资源网 Design By www.bzswh.com

 大家好!先上图看看本次案例的整体效果。

Vue.js实现大转盘抽奖总结及实现思路

       实现思路:

Vue component实现大转盘组件,可以嵌套到任意要使用的页面。

css3 transform控制大转盘抽奖过程的动画效果。

抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示。

中奖结果弹窗,为抽奖组件服务。

       实现步骤如下:

 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息。

api:

export default {
 getPrizeList () {
  let prizeList = [
   {
    id: 1,
    name: '小米8',
    img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/m8-140.png'
   },
   {
    id: 2,
    name: '小米电视',
    img: 'https://i1.mifile.cn/f/i/g/2015/TV4A-43QC.png'
   }, {
    id: 3,
    name: '小米平衡车',
    img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140x140.jpg'
   }, {
    id: 4,
    name: '小米耳机',
    img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
   }
  ]
  return prizeList
 },
 lottery () {
  return {
   id: 4,
   name: '小米耳机',
   img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
  }
 }
}

store:

import lotteryApi from '../../api/lottery.api.js'
const state = {
 prizeList: [],
 lotteryResult: {}
}
const getters = {
 prizeList: state => state.prizeList,
 lotteryResult: state => state.lotteryResult
}
const mutations = {
 SetPrizeList (state, { prizeList }) {
  state.prizeList = prizeList
 },
 SetLotteryResult (state, { lotteryResult }) {
  state.lotteryResult = lotteryResult
 }
}
const actions = {
 getPrizeList ({ commit }) {
  let result = lotteryApi.getPrizeList()
  commit('SetPrizeList', { prizeList: result })
 },
 lottery ({ commit }) {
  let result = lotteryApi.lottery()
  commit('SetLotteryResult', { lotteryResult: result })
 }
}

export default {
 state,
 getters,
 mutations,
 actions,
 namespaced: true
}

编写抽奖组件,为保证通用性,组件只负责播放抽奖结果。接收两个数据和一个方法,如下:

数据一:预置的奖品列表数据(轮播奖品需要)

数据二:抽奖结果,播放抽奖动画和弹出中奖结果需要

方法:抽奖动作,返回的抽奖结果数据即为数据二,响应式传递给组件

大概代码思路如下(仅供参考,不可运行)

<template>
 <section>
  <div class="lucky-item">
   <img src="/UploadFiles/2021-04-02/o_backImage.jpg">

弹出中奖结果组件,依附于抽奖组件,在上一步的执行抽奖结果动画结束后执行。

<template>
<div class="subject-pop" style="z-index: 10;" v-if="prize.id>0">
   <div class="subject-pop-mask"></div>
   <div class="subject-pop-box">
    <h3>恭喜您</h3>
    <p>
     <img :src="/UploadFiles/2021-04-02/prize.img">

抽奖组件运用在需要使用的页面中,此页面需要为抽奖组件提前准备好预置奖品列表和中奖结果信息,并提供好抽奖方法供子组件(抽奖组件)触发,触发完更改抽奖结果响应式传入到抽奖组件中。

<template>
 <section>
  <div style="width:100%;text-align:center;margin:2rem 0;">您有一次抽奖机会,祝君好运~~~</div>
  <BigTurntable :prizes="prizeList"
         :lotteryResult="lotteryResult"
         @lottery="lottery" />
 </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import BigTurntable from '@/components/bigTurntable.vue'
export default {
 name: 'BigTurntableRun',
 created () {
  var self = this
  self.getPrizeList()
 },
 components: {
  BigTurntable
 },
 computed: {
  ...mapGetters({
   prizeList: 'lottery/prizeList',
   lotteryResult: 'lottery/lotteryResult'
  })
 },
 methods: {
  ...mapActions({
   getPrizeList: 'lottery/getPrizeList',
   lottery: 'lottery/lottery'
  })
 }
}
</script>

总结

以上所述是小编给大家介绍的Vue.js实现大转盘抽奖总结及实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

标签:
vue.js,大转盘抽奖,vue,js,抽奖

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。