持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
未雨绸缪
最近活动来得非常猛，和产品运营磨合的过程也是沉淀了不少玩法。听说👂🏻最近要加一个新玩法，我想经典的扭蛋、老虎机、大转盘都沉淀下来了，剩下很大概率是九宫格抽奖，原型一看，果不其然正是宫格抽奖。
宫格抽奖相较于上面几种玩法实现起来更简单，有信心需求正式定下来之前实现成通用组件。
核心实现
实现方向主要是布局和抽奖逻辑
布局实现
为了让开发者只关注ui，内部会计算宫格数量和按钮状态，进行智能化布局。
坐标轴
内部会把宫格进行坐标轴标记，也就是为每个宫格都带上(x,y)编号。这样的好处有两方面，可以通过坐标轴进行布局计算，下面接下来所说的步进器，也是基于坐标轴实现
步进器
步进器实现了抽奖滚动逻辑，基于坐标轴顺序进行下一步的前进，具体逻辑：
- 首先x坐标上加1
- 当x轴走到尽头则开始走y+1
- 当y轴走到尽头则开始走x-1
- 当x轴走到0则开始走y-1
- 当y轴走到0则开始走x-1, 然后重复第1步到第5步，直到圈数走完
如下图👇🏻，一圈下来的顺序是：(0, 0),(1, 0),(2, 0),(2, 1),(2, 2),(1, 2),(0, 2),(0, 1),(0, 0)，一圈完成。
奖品中的黑色数字不是滚动顺序！！！而是奖品组件的下标，因为奖品组件一般而言是有多个，它是从左到右排序，并不是跟坐标轴顺序一样排序，而且我是故意隔离开两个顺序的处理，这是因为组件里面有一个direction的参数来控制左滚动还是右滚动
<gridRoll>
<!-- 按钮 -->
<template v-slot:button>
<gridStart>
<!-- 按钮ui -->
</gridStart>
</template>
<!-- 奖品 -->
<template v-slot:prize>
<gridPrize
v-for="prize in prizes"
:key="prize.id"
:pid="prize.id"
>
<!-- 奖品ui -->
</gridPrize>
</template>
</gridRoll>
只欠东风
万事俱备，只欠编码，结果发现不是我来做这个需求，不知道高兴还是失落。为了不白做，在我的不停安利下，同事做了我的第一只白老鼠。
写的时候没啥毛病，到对接接口的时候，发现一个大病：安装现在的业务场景，点击抽奖按钮要等待抽奖接口返回才可以展示抽奖交互，这样用户会以为按钮按了没反义，体验非常不好。
于是加班赶了一个功能continueRoll，调用这个功能可以持续滚动抽奖交互，直到接口返回，才真正去调用startRoll方法走抽奖，其中continueRoll和startRoll的滚动频率是一致的，可以无缝对接。这样整个交互就顺畅无比
结尾
后面有空重构成支持vue2和vue3
