【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结_咋地 _前端开发者

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

       实现思路:

  1. vue component实现大转盘组件,可以嵌套到任意要使用的页面。
  2. css3 transform控制大转盘抽奖过程的动画效果。
  3. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示。
  4. 中奖结果弹窗,为抽奖组件服务。
  • vue component实现大转盘组件,可以嵌套到任意要使用的页面。
  • css3 transform控制大转盘抽奖过程的动画效果。
  • 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示。
  • 中奖结果弹窗,为抽奖组件服务。
  •        实现步骤如下:

    1.  构建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
      }

       

    2. 编写抽奖组件,为保证通用性,组件只负责播放抽奖结果。接收两个数据和一个方法,如下:
      数据一:预置的奖品列表数据(轮播奖品需要)
      数据二:抽奖结果,播放抽奖动画和弹出中奖结果需要
      方法:抽奖动作,返回的抽奖结果数据即为数据二,响应式传递给组件
      大概代码思路如下(仅供参考,不可运行)
      <template>
        <section>
          <div class="lucky-item">
            <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_backImage.jpg"
                 alt>
            <div class="lucky-box">
              <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_circle.jpg"
                   alt>
              <ul id="wheel"
                  class="wheel-list"
                  :style="wheelStyle"
                  :class="transition">
                <li v-for="(prize,index) in slotPrizes"
                    :style="{transform: 'rotate('+index*45+'deg)'}"
                    v-bind:key="index">
                  <div class="fan-item"
                       style="transform: rotate(15deg) skewY(45deg);"></div>
                  <div class="lucky-prize">
                    <h3>{{prize.name}}</h3>
                  </div>
                </li>
              </ul>
              <div class="wheel-btn"
                   @click="$emit('lottery')">
                <a>
                  <img src="//images.cnblogs.com/cnblogs_com/codeon/878827/o_go.jpg"
                       alt>
                </a>
              </div>
            </div>
            <prize-pop :prize="lotteryResult"
                       v-if="showPrize"
                       @closeLotteryPop="showPrize=false" />
          </div>
        </section>
      </template>
      <script>
      import PrizePop from './common/prize-pop.vue'
      export default {
        name: 'BigTurntable',
        data () {
          return {
            isStart: false,
            showPrize: false,
            wheelStyle: { 'transform': 'rotate(0deg)' },
            transition: 'transitionclear',
            playTurns: 5 // 默认先旋转5圈
          }
        },
        components: {
          PrizePop
        },
        props: {
          prizes: {
            type: Array,
            required: false
          },
          lotteryResult: {
            type: Object,
            default: () => { }
          }
        },
        computed: {
          slotPrizes () {
            var self = this
            console.log(self.prizes)
            let prizeList = []
            prizeList.push({ ...self.prizes[0], slotIndex: 1 })
            prizeList.push({ name: '谢谢参与', slotIndex: 2 })
            prizeList.push({ ...self.prizes[1], slotIndex: 3 })
            prizeList.push({ name: '谢谢参与', slotIndex: 4 })
            prizeList.push({ ...self.prizes[2], slotIndex: 5 })
            prizeList.push({ name: '谢谢参与', slotIndex: 6 })
            prizeList.push({ ...self.prizes[3], slotIndex: 7 })
            prizeList.push({ name: '谢谢参与', slotIndex: 8 })
            console.log(prizeList)
            return prizeList
          }
        },
        methods: {
          /**
           * 执行抽奖动画
           */
          playWheel (index) {
            
          },
           /**
           * 获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品
          */
          getPrizeIndex (prizeId) {
          
          }
        },
        watch: {
      /**
           * 监听抽奖结果,一旦有中奖信息就开始执行抽奖动画
           */
          lotteryResult (newVal, oldVal) {
            var self = this
            if (newVal.id && newVal.id > 0) {
              let index = self.getPrizeIndex(newVal.id)
              self.playWheel(index)
            }
          }
        }
      }
      </script>

       

    3. 弹出中奖结果组件,依附于抽奖组件,在上一步的执行抽奖结果动画结束后执行。
      <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>

       

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

      以上就是大转盘抽奖核心步骤的整体思路,欢迎讨论。

  •  构建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
    }

     

  • 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'
        }
      }
    }
    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'
        }
      }
    }

    {
    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!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    [
    {
    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!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    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!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    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!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }

    },
    {
    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!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    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!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    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!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }

    }, {
    id: 3,
    name: ‘小米平衡车’,
    img: ‘https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    name: ‘小米平衡车’,
    img: ‘https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    img: ‘https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140×140.jpg’
    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }

    }, {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }

    }
    ]
    return prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    prizeList
    },
    lottery () {
    return {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    {
    id: 4,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    name: ‘小米耳机’,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.jpg’
    }
    }
    }
    ,
    img: ‘https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140×140.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
    }
    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
    }

    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
    }
    {
    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
    }
    {
    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
    }
    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
    }
    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
    }
    {
    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
    }
    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
    }
    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
    }
    {
    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
    }
    lotteryApi.getPrizeList()
    commit(‘SetPrizeList’, { prizeList: result })
    },
    lottery ({ commit }) {
    let result = lotteryApi.lottery()
    commit(‘SetLotteryResult’, { lotteryResult: result })
    }
    }

    export default {
    state,
    getters,
    mutations,
    actions,
    namespaced: true
    }
    , { prizeList: result })
    },
    lottery ({ commit }) {
    let result = lotteryApi.lottery()
    commit(‘SetLotteryResult’, { lotteryResult: result })
    }
    }

    export default {
    state,
    getters,
    mutations,
    actions,
    namespaced: true
    }
    lotteryApi.lottery()
    commit(‘SetLotteryResult’, { lotteryResult: result })
    }
    }

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

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

    }

     

  • 编写抽奖组件,为保证通用性,组件只负责播放抽奖结果。接收两个数据和一个方法,如下:
    数据一:预置的奖品列表数据(轮播奖品需要)
    数据二:抽奖结果,播放抽奖动画和弹出中奖结果需要
    方法:抽奖动作,返回的抽奖结果数据即为数据二,响应式传递给组件
    大概代码思路如下(仅供参考,不可运行)
    <template>
      <section>
        <div class="lucky-item">
          <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_backImage.jpg"
               alt>
          <div class="lucky-box">
            <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_circle.jpg"
                 alt>
            <ul id="wheel"
                class="wheel-list"
                :style="wheelStyle"
                :class="transition">
              <li v-for="(prize,index) in slotPrizes"
                  :style="{transform: 'rotate('+index*45+'deg)'}"
                  v-bind:key="index">
                <div class="fan-item"
                     style="transform: rotate(15deg) skewY(45deg);"></div>
                <div class="lucky-prize">
                  <h3>{{prize.name}}</h3>
                </div>
              </li>
            </ul>
            <div class="wheel-btn"
                 @click="$emit('lottery')">
              <a>
                <img src="//images.cnblogs.com/cnblogs_com/codeon/878827/o_go.jpg"
                     alt>
              </a>
            </div>
          </div>
          <prize-pop :prize="lotteryResult"
                     v-if="showPrize"
                     @closeLotteryPop="showPrize=false" />
        </div>
      </section>
    </template>
    <script>
    import PrizePop from './common/prize-pop.vue'
    export default {
      name: 'BigTurntable',
      data () {
        return {
          isStart: false,
          showPrize: false,
          wheelStyle: { 'transform': 'rotate(0deg)' },
          transition: 'transitionclear',
          playTurns: 5 // 默认先旋转5圈
        }
      },
      components: {
        PrizePop
      },
      props: {
        prizes: {
          type: Array,
          required: false
        },
        lotteryResult: {
          type: Object,
          default: () => { }
        }
      },
      computed: {
        slotPrizes () {
          var self = this
          console.log(self.prizes)
          let prizeList = []
          prizeList.push({ ...self.prizes[0], slotIndex: 1 })
          prizeList.push({ name: '谢谢参与', slotIndex: 2 })
          prizeList.push({ ...self.prizes[1], slotIndex: 3 })
          prizeList.push({ name: '谢谢参与', slotIndex: 4 })
          prizeList.push({ ...self.prizes[2], slotIndex: 5 })
          prizeList.push({ name: '谢谢参与', slotIndex: 6 })
          prizeList.push({ ...self.prizes[3], slotIndex: 7 })
          prizeList.push({ name: '谢谢参与', slotIndex: 8 })
          console.log(prizeList)
          return prizeList
        }
      },
      methods: {
        /**
         * 执行抽奖动画
         */
        playWheel (index) {
          
        },
         /**
         * 获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品
        */
        getPrizeIndex (prizeId) {
        
        }
      },
      watch: {
    /**
         * 监听抽奖结果,一旦有中奖信息就开始执行抽奖动画
         */
        lotteryResult (newVal, oldVal) {
          var self = this
          if (newVal.id && newVal.id > 0) {
            let index = self.getPrizeIndex(newVal.id)
            self.playWheel(index)
          }
        }
      }
    }
    </script>

     

  • <template>
      <section>
        <div class="lucky-item">
          <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_backImage.jpg"
               alt>
          <div class="lucky-box">
            <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_circle.jpg"
                 alt>
            <ul id="wheel"
                class="wheel-list"
                :style="wheelStyle"
                :class="transition">
              <li v-for="(prize,index) in slotPrizes"
                  :style="{transform: 'rotate('+index*45+'deg)'}"
                  v-bind:key="index">
                <div class="fan-item"
                     style="transform: rotate(15deg) skewY(45deg);"></div>
                <div class="lucky-prize">
                  <h3>{{prize.name}}</h3>
                </div>
              </li>
            </ul>
            <div class="wheel-btn"
                 @click="$emit('lottery')">
              <a>
                <img src="//images.cnblogs.com/cnblogs_com/codeon/878827/o_go.jpg"
                     alt>
              </a>
            </div>
          </div>
          <prize-pop :prize="lotteryResult"
                     v-if="showPrize"
                     @closeLotteryPop="showPrize=false" />
        </div>
      </section>
    </template>
    <script>
    import PrizePop from './common/prize-pop.vue'
    export default {
      name: 'BigTurntable',
      data () {
        return {
          isStart: false,
          showPrize: false,
          wheelStyle: { 'transform': 'rotate(0deg)' },
          transition: 'transitionclear',
          playTurns: 5 // 默认先旋转5圈
        }
      },
      components: {
        PrizePop
      },
      props: {
        prizes: {
          type: Array,
          required: false
        },
        lotteryResult: {
          type: Object,
          default: () => { }
        }
      },
      computed: {
        slotPrizes () {
          var self = this
          console.log(self.prizes)
          let prizeList = []
          prizeList.push({ ...self.prizes[0], slotIndex: 1 })
          prizeList.push({ name: '谢谢参与', slotIndex: 2 })
          prizeList.push({ ...self.prizes[1], slotIndex: 3 })
          prizeList.push({ name: '谢谢参与', slotIndex: 4 })
          prizeList.push({ ...self.prizes[2], slotIndex: 5 })
          prizeList.push({ name: '谢谢参与', slotIndex: 6 })
          prizeList.push({ ...self.prizes[3], slotIndex: 7 })
          prizeList.push({ name: '谢谢参与', slotIndex: 8 })
          console.log(prizeList)
          return prizeList
        }
      },
      methods: {
        /**
         * 执行抽奖动画
         */
        playWheel (index) {
          
        },
         /**
         * 获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品
        */
        getPrizeIndex (prizeId) {
        
        }
      },
      watch: {
    /**
         * 监听抽奖结果,一旦有中奖信息就开始执行抽奖动画
         */
        lotteryResult (newVal, oldVal) {
          var self = this
          if (newVal.id && newVal.id > 0) {
            let index = self.getPrizeIndex(newVal.id)
            self.playWheel(index)
          }
        }
      }
    }
    </script>
    <template>
      <section>
        <div class="lucky-item">
          <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_backImage.jpg"
               alt>
          <div class="lucky-box">
            <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_circle.jpg"
                 alt>
            <ul id="wheel"
                class="wheel-list"
                :style="wheelStyle"
                :class="transition">
              <li v-for="(prize,index) in slotPrizes"
                  :style="{transform: 'rotate('+index*45+'deg)'}"
                  v-bind:key="index">
                <div class="fan-item"
                     style="transform: rotate(15deg) skewY(45deg);"></div>
                <div class="lucky-prize">
                  <h3>{{prize.name}}</h3>
                </div>
              </li>
            </ul>
            <div class="wheel-btn"
                 @click="$emit('lottery')">
              <a>
                <img src="//images.cnblogs.com/cnblogs_com/codeon/878827/o_go.jpg"
                     alt>
              </a>
            </div>
          </div>
          <prize-pop :prize="lotteryResult"
                     v-if="showPrize"
                     @closeLotteryPop="showPrize=false" />
        </div>
      </section>
    </template>
    <script>
    import PrizePop from './common/prize-pop.vue'
    export default {
      name: 'BigTurntable',
      data () {
        return {
          isStart: false,
          showPrize: false,
          wheelStyle: { 'transform': 'rotate(0deg)' },
          transition: 'transitionclear',
          playTurns: 5 // 默认先旋转5圈
        }
      },
      components: {
        PrizePop
      },
      props: {
        prizes: {
          type: Array,
          required: false
        },
        lotteryResult: {
          type: Object,
          default: () => { }
        }
      },
      computed: {
        slotPrizes () {
          var self = this
          console.log(self.prizes)
          let prizeList = []
          prizeList.push({ ...self.prizes[0], slotIndex: 1 })
          prizeList.push({ name: '谢谢参与', slotIndex: 2 })
          prizeList.push({ ...self.prizes[1], slotIndex: 3 })
          prizeList.push({ name: '谢谢参与', slotIndex: 4 })
          prizeList.push({ ...self.prizes[2], slotIndex: 5 })
          prizeList.push({ name: '谢谢参与', slotIndex: 6 })
          prizeList.push({ ...self.prizes[3], slotIndex: 7 })
          prizeList.push({ name: '谢谢参与', slotIndex: 8 })
          console.log(prizeList)
          return prizeList
        }
      },
      methods: {
        /**
         * 执行抽奖动画
         */
        playWheel (index) {
          
        },
         /**
         * 获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品
        */
        getPrizeIndex (prizeId) {
        
        }
      },
      watch: {
    /**
         * 监听抽奖结果,一旦有中奖信息就开始执行抽奖动画
         */
        lotteryResult (newVal, oldVal) {
          var self = this
          if (newVal.id && newVal.id > 0) {
            let index = self.getPrizeIndex(newVal.id)
            self.playWheel(index)
          }
        }
      }
    }
    </script>


    alt

    alt

    class

    :style

    :class
    for
    :style

    v

    style

    @click

    alt

    v
    if
    @closeLotteryPop

    import PrizePop from

    export
    default {
    name:
    ,
    data () {
    return {
    isStart:
    false,
    showPrize:
    false,
    wheelStyle: {
    },
    transition:
    ,
    playTurns:
    // 默认先旋转5圈 }
    },
    components: {
    PrizePop
    },
    props: {
    prizes: {
    type: Array,
    required:
    false
    },
    lotteryResult: {
    type: Object,
    default { }
    }
    },
    computed: {
    slotPrizes () {
    varthis
    console.log(self.prizes)
    let prizeList
    []
    prizeList.push({ …self.prizes[
    })
    prizeList.push({ name:
    })
    prizeList.push({ …self.prizes[
    })
    prizeList.push({ name:
    })
    prizeList.push({ …self.prizes[
    })
    prizeList.push({ name:
    })
    prizeList.push({ …self.prizes[
    })
    prizeList.push({ name:
    })
    console.log(prizeList)
    return prizeList
    }
    },
    methods: {
    /**
    * 执行抽奖动画
    */
    playWheel (index) {

    },
    /**
    * 获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品
    */
    getPrizeIndex (prizeId) {

    }
    },
    watch: {
    /**
    * 监听抽奖结果,一旦有中奖信息就开始执行抽奖动画
    */
    lotteryResult (newVal, oldVal) {
    varthisif) {
    let index
    self.getPrizeIndex(newVal.id)
    self.playWheel(index)
    }
    }
    }
    }

     

  • 弹出中奖结果组件,依附于抽奖组件,在上一步的执行抽奖结果动画结束后执行。
    <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>
    <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>
    <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>

    获得
    <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>

    export default {
    props: {
    prize: {
    type: Object,
    default: () => {
    return {
    id: 0
    }
    }
    }
    },
    methods: {
    closeLotteryEmit () {
    this.$emit(‘closeLotteryPop’)
    }
    }
    }
    </script>
    {
    props: {
    prize: {
    type: Object,
    default: () => {
    return {
    id: 0
    }
    }
    }
    },
    methods: {
    closeLotteryEmit () {
    this.$emit(‘closeLotteryPop’)
    }
    }
    }
    </script>
    {
    return {
    id: 0
    }
    }
    }
    },
    methods: {
    closeLotteryEmit () {
    this.$emit(‘closeLotteryPop’)
    }
    }
    }
    </script>
    {
    id: 0
    }
    }
    }
    },
    methods: {
    closeLotteryEmit () {
    this.$emit(‘closeLotteryPop’)
    }
    }
    }
    </script>

    }
    }
    }
    },
    methods: {
    closeLotteryEmit () {
    this.$emit(‘closeLotteryPop’)
    }
    }
    }
    </script>
    )
    }
    }
    }
    </script>

     

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

    以上就是大转盘抽奖核心步骤的整体思路,欢迎讨论。

  • <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>
    <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>


    :lotteryResult

    @lottery

    import { mapGetters, mapActions } from

    import BigTurntable from

    export
    default {
    name:
    ,
    created () {
    varthis
    self.getPrizeList()
    },
    components: {
    BigTurntable
    },
    computed: {
    …mapGetters({
    prizeList:
    ,
    lotteryResult:

    })
    },
    methods: {
    …mapActions({
    getPrizeList:
    ,
    lottery:

    })
    }
    }

    以上就是大转盘抽奖核心步骤的整体思路,欢迎讨论。

    Vue.js实战之游戏抽奖系列全集

    Vue.js实战之游戏抽奖系列全集

    ↓↓↓↓↓↓↓↓↓↓↓

    ↓↓↓↓↓↓↓↓↓↓↓

    【Vue.js实战案例】- Vue.js实现老虎-机抽奖总结

    【Vue.js实战案例】- Vue.js实现老虎-机抽奖总结【Vue.js实战案例】- Vue.js实现老虎-机抽奖总结【Vue.js实战案例】- Vue.js实现老虎-机抽奖总结

    【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏总结

    【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏总结【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏总结【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏总结

    【Vue.js实战案例】- Vue.js实现大转盘抽奖总结

    【Vue.js实战案例】- Vue.js实现大转盘抽奖总结【Vue.js实战案例】- Vue.js实现大转盘抽奖总结【Vue.js实战案例】- Vue.js实现大转盘抽奖总结

    » 本文来自:前端开发者 » 《【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结_咋地 _前端开发者》
    » 本文链接地址:https://www.rokub.com/73526.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!