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

大家好！我们来看看这个案例的整体效果。

实施思路：

Vue组件实现了一个大的转盘组件，可以嵌套到任何要使用的页面中。

Css3变换控制大转盘抽奖过程中的动画效果。

在抽奖组件中，钩子功能手表用于监控抽奖结果的返回，播放大转盘动画，并为用户弹出中奖提示。

将弹出中奖结果，为彩票部分服务。

实施步骤如下：

建立api奖品配置信息和抽奖接口，vuex全局存储奖品配置和中奖结果数据信息。

api:

export default { getpricelist(){ let pricelist=[{ id :1，名称： '小米8 '，img : ' https://i1.mifile.cn/f/I/g/2015/cn-index/M8-140.png'}, { id : 2，名称： '小米电视'，img : ' https://i1.mifile.cn/f/I/g/2015/tv4a-43qc.png'}, { id : 3，名称： '小米平衡车'，img 33330。140x140.jpg'}，{id: 4，name: '小米耳机'，img : ' https://C1 . mifile.cn/f/I/g/2015/video/pinpai 140！140x140.jpg'}]返奖名单}、抽奖(){返{id: 4，name: '小米耳机'，img : ' https://C1 . mifile.cn/f/I/g/2015/video/pinpai 140！140x140.jpg' } }}store:

从导入lotteryApi '././API/lottery . API . js ' const state={ prizrist :[]，lottery result : { } } const getter s={ prizrist : state . prizrist，lottery result : state=state . lottery result } const突变={ setprizrist(state，{ prizrist }){ state . prizrist=prizrist }，SetLotteryResult (state，{ lottery result }){ state . lottery result=lottery result } } const为了保证通用性，组件只负责玩抽奖结果。接收两个数据和一个方法如下：

数据1:预设的奖品列表数据(循环奖品需要)

数据2:抽奖结果，播放抽奖动画，弹出中奖结果

方法：抽奖动作，返回的抽奖结果数据是数据2，其作为响应被传输到组件

代码的总体思路如下(仅供参考，不能运行)

模板节div class=' lucky-item ' img src=' http://www .cn博客。com/images/cn blogs _ com/codeon/878827/o _ back image。jpg ' alt div class=' lucky-box ' img src=' http://www .cn博客。com/images/cn blogs _ com/codeon/878827/o _ circle。jpg ' alt ul id=' wheel ' class=' wheel-list ' 3360 style='/div class=' lucky-price ' H3 { { price。name } }/H3/div/Li/ul div class=' wheel-BTN ' @ click=' $ emit('彩票)' a img src=' http://图像。cn博客。com/cn blogs _ com/codeon/878827/o _ go。jpg ' alt/a/div/div奖品-pop :奖品='抽奖结果' v-if='显示奖品' @ closeloterpop='显示'/common/price-pop。vue ' export default { name : ' bigtrotate '，data(){ return { is start : false，showPrize: false，wheestyle : { ' transform ' : ' rotate(0)}，transition : ' transition clear '，play turn 3360 5//默认先旋转5圈} }，components: { PrizePop }，prop : { price : { type : Array，required: false }，lottery result : { type : Object，default: ()={ } } }，computed : { slot prices(){ var self=this console。日志(自我。价格)让prize ist=[]prize ist push({ .自我。奖品[0]，slotindex : { 1 })价目表。push({ name : '谢谢参与，slotindex : { 2 })价目表。推送({ 0.自我。奖品[1]，slotindex : { 3 })价目表。push({ name : '谢谢参与，slotindex : { 4 })价目表。推送({ 0.自我。奖品[2]，slotindex : 5 })奖品清单。push({ name : '谢谢参与，slotindex : { 6 })价目表。推送({ 0.自我。奖品[3]，slotindex : 7 })价格表。push({ name : '谢谢参与，slotindex : 8 })控制台。log(pricelist)返回pricelist } }，methods: { /** *执行抽奖动画*/playWheel(索引){ },/** *获取中奖结果所在奖品列表中的索引，以确定抽奖动画最终落在哪个奖品*/getPrizeIndex (prizeId) { }，watch: {/** *监听抽奖结果，一旦有中奖信息就开始执行抽奖动画*/LottryResult(NewVal，旧val){ var self=this if(new val。id新val。id 0){ let index=self。getprizeindex(新val。自我。playwheel(索引)} } } }脚本弹出中奖结果组件，依附于抽奖组件，在上一步的执行抽奖结果动画结束后执行。

模板div class=' subject-pop ' style=' z-index : 10；'v-if='奖。id0 ' div class=' subject-pop-mask '/div class=' subject-pop-box ' H3恭喜您/H3 p img : src=' http :奖品。H4获得span/span span { { price。name } }/span/H4 div class=' subject-pop-footer ' a href=' JavaScript :'rel='外部无跟随' class=' 11月-BTN 1 ' @ click=' closelottrylimit '知道了/a/div/div/templatescript导出默认值{ prop : { price : { type : Object，default :()={ return { id : { 0 } } } }，方法： { closelottryemit(){ this .$ emit(' closelotteryPop ')} } }/script抽奖组件运用在需要使用的页面中，此页面需要为抽奖组件提前准备好预置奖品列表和中奖结果信息，并提供好抽奖方法供子组件（抽奖组件)触发，触发完更改抽奖结果响应式传入到抽奖组件中。

模板节div style=' width :100%；文本对齐：居中；边距：2雷姆；0 '您有一次抽奖机会，祝君好运~ ~/div大转盘：奖品=“价目表”:彩票结果=“彩票结果”彩票='彩票//section/templatescript从“vuex”导入中导入{ mapgeters，mapActions }转盘来自' @/组件/大转盘。vue ' export default { name : ' big turnbaterun '，created(){ var self=this self。getpricelist()}，components: {转盘}，computed: {.mapgetter({ pricelist : '彩票/pricelist '，lotteryResult: '彩票/lotteryResult' }) }，methods: {.mapActions({ getpricelist : '彩票/getpricelist '，lottery: '彩票/彩票})} }/脚本总结

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