大家好！先上图看看本次案例的整体效果。
完整版实战课程附源码：【Vue.js游戏机实战】- 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> <div class="main"> <div class="squared" v-if="slotPrizes.length>0"> <ul class="squared-warpper"> <li class="squared-item" v-for="(item,index) in slotPrizes" v-bind:key="index"> <img class="squared-item-btn" @click="parentEmitLottery()" v-if="index==4" src="//images.cnblogs.com/cnblogs_com/codeon/878827/t_startLottery.jpg"> <div v-if="index!=4" class="squared-item-prise" :class="item.slotIndex==playIndex ? 'on':''"> <img :src="item.img"> </div> </li> </ul> </div> <prize-pop :prize="lotteryResult" v-if="showPrize" @closeLotteryPop="showPrize=false" /> </div> </template> <script> import PrizePop from './common/prize-pop.vue' export default { name: 'FruitMachine', data () { return { isStart: false, showPrize: false, count: 0, // 移动总次数 prizeIndex: -1, // 中奖的奖品索引 timeOut: 100, // 延迟执行时间 endingTimeOut: 200, // 最后一圈延迟执行时间 intervalCount: 4, // 循环轮播次数 playIndex: 0 // 当前移动的索引 } }, components: { PrizePop }, props: { prizes: { type: Array, required: false }, lotteryResult: { type: Object, default: () => { } } }, computed: { slotPrizes () { let prize = [] var self = this console.log(self.prizes) if (self.prizes.length > 0) { prize.push({ ...self.prizes[0], slotIndex: 1 }) prize.push({ id: -1, slotIndex: 2, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' }) prize.push({ ...self.prizes[1], slotIndex: 3 }) prize.push({ id: -1, slotIndex: 8, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' }) prize.push({ id: -1, slotIndex: -1, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' }) prize.push({ id: -1, slotIndex: 4, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' }) prize.push({ ...self.prizes[3], slotIndex: 7 }) prize.push({ id: -1, slotIndex: 6, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' }) prize.push({ ...self.prizes[2], slotIndex: 5 }) } return prize } }, methods: { /** * 触发父页面调用抽奖 */ parentEmitLottery () { this.$emit('lottery') }, /** * 开始抽奖 */ startLottery () { }, /** * 获取中奖结果所在奖品列表中的索引，以确定抽奖动画最终落在哪个奖品 */ getPrizeIndex () { }, /** * 执行抽奖动画 */ intervalPlay() { } }, watch: { lotteryResult (newVal, oldVal) { if (newVal.id && newVal.id > 0) { this.startLottery() } } } } </script> - 弹出中奖结果组件，依附于抽奖组件，在上一步的执行抽奖结果动画结束后执行。
<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="prize.img" alt> </p> <h4>获得 <span></span> <span>{{prize.name}}</span> </h4> <div class="subject-pop-footer"> <a href="javascript:;" class="november-btn1" @click="closeLotteryEmit">知道了</a> </div> </div> </div> </template> <script> export default { props: { prize: { type: Object, default: () => { return { id: 0 } } } }, methods: { closeLotteryEmit () { this.$emit('closeLotteryPop') } } } </script> - 抽奖组件运用在需要使用的页面中，此页面需要为抽奖组件提前准备好预置奖品列表和中奖结果信息，并提供好抽奖方法供子组件（抽奖组件）触发，触发完更改抽奖结果响应式传入到抽奖组件中。
<template> <section> <div style="100%;text-align:center;margin:2rem 0;">您有一次抽奖机会，祝君好运~~~</div> <FruitMachine v-bind:prizes="prizeList" v-bind:lotteryResult="lotteryResult" v-on:lottery="lottery" /> </section> </template> <script> import { mapGetters, mapActions } from 'vuex' import FruitMachine from '@/components/fruitMachine' export default { data () { return { } }, created () { var self = this self.getPrizeList() }, components: { FruitMachine }, computed: { ...mapGetters({ prizeList: 'lottery/prizeList', lotteryResult: 'lottery/lotteryResult' }) }, methods: { ...mapActions({ getPrizeList: 'lottery/getPrizeList', lottery: 'lottery/lottery' }) } } </script>
以上就是九宫格水果机抽奖核心步骤的整体思路，欢迎讨论。
完整版九宫格水果机实战课程附源码：【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖