vue 版的老虎机抽奖活动效果折腾小记

. 前沿

---

最近公司有一个活动，让做一个老虎机抽奖活动，对于之前没有做过的我来说还是有些吃力的，于是就开始各种网上找插件，发现大部分都是jquery的，要不就是好多一部分的，一个完整的流程都走不下来，更有甚者让花钱买他的代码，我就想说大家都是分享，互相交流，你们怎么就那么自私，所以今天把我折腾的老虎机分享出来，以来方便自己以后开发，而来大家也可以发现不足，指出来共同进步。

---

. 该项目需要雪碧图哦

. 来先看看效果图

. 代码里边都有注释，比较容易上手。我用的是曲线救国的方法，就是说并不完美，不太灵活，雪碧图的位置一旦确定，就尽量不要动了，不然下次还需要在重新调雪碧图的y轴的位置，这个很烦，希望看见的小伙伴给个建议。

---

. 作者最近一段时间比较忙，还未将该效果抽出公共组件，后期有机会抽成公共组件，就好了。会省好多事。

---

. 好了不说废话了，上思路，代码。

思路逻辑：老虎机抽奖结果以后台告知为准，所以前台需要根据后台返回的是否抽中标示来展示相应的效果

其实我刚开始认为抽奖结果是前端做的，然后越陷越深，发现不好做出来，而且安全性不高，然后跟小伙伴交流才知道一般抽奖类的活动抽奖结果都是由后台告知，这下就轻松多了，因为你只需要根据结果展示相应的效果就好了。

. 主要运用的技术

老虎机抽奖活动运用到了css3的transition和css3的过渡来实现平滑滚动的效果，通过改变背景雪碧图的y轴位置backgroundPositionY来展示不同的奖品，以达到抽奖效果。js通过定时器可以达到转动效果
#第一步，布局

<template>
    <div id="slotMachine">
        <div class="PosRela priceCenter HomeBGColor Width100">
            <img class="Width100 Height100" src="../img/2@2x.png">
            <!-- 老虎机抽奖框 -->
            <div class="PosAbso trigerCenter">
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceOne + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceTwo + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceThr + 'rem'}"></div>
                </transition>
            </div>
        </div>
        <!-- 前往抽奖区参与活动赢好礼！ -->
        <!-- DrawToast 是封装的公共弹窗组件 -->
        <DrawToast v-show='isGoToPrice' @fromChild="GoToPrice">
            <div class="PosRela GoToPrice" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/弹窗@2x (1).png">
                <div class="PosAbso Width100 Font17 FontWeight GoToPriceText">前往抽奖区参与活动赢好礼！</div>
            </div>
        </DrawToast>
        <!-- 获得福利券弹窗 -->
        <DrawToast v-show='isGetWelfare' @fromChild="GetWelfare">
            <div class="PosRela GetWelfare" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/弹窗-点击抽奖@2x.png">
                <div class="PosAbso Width100 Font20 FontWeight constrGet">恭喜您获得</div>
                <div class="PosAbso Width100  getVoucher">
                    <div class="getVoucherName Font24 FontWeight Ellipsis"