【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结
大家好！先上图看看本次案例的整体效果。 完整版实战课程附源码 ： 【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: '小米耳机' ,