抽奖是大家常用的一个业务场景，如果专业点的可以用NutUI Bingo，是由京东 NutUI 前端团队出品的一款基于 NutUI + Vue 3 的抽奖组件库，用于快速开发营销活动和小游戏场景的抽奖玩法。

如果大家环境和NutUI/Vue3相符，可以试试看，因为我采用的是Vue2/AntD,所以就换了一个组件：lattice-lottery，其对应的官网地址为：

最终实现的效果如下：

大致的实现思路如下：

组件的封装

首先将官方组件封装为一个新组件，以管理抽奖业务场景的其它业务需求，在上例中，实现了：

抽奖页到中奖页的切换配送地址功能入口

实现机制都比较简单，前者切换用一个开关进行标识，后者则触发一个访问地址的事件。

组件比较简单，大家看官方文档，这里注意几点：

奖品数量因为要凑满九宫格，所以在扣除中间的按钮后，要指定八个奖品Go触发2次会报错在实际业务场景中，实际获奖情况由后端提供，Go接收这个参数，如后端给2，则go函数将返回中奖的奖品为列表数组中的下标为2的奖品。

定制样式

官方文档给的样式比较简单，一般情况下我们要进行定制，这里贴一下定制样式的代码，这个是参考官网中最后一个例子来的，需要主意的地方是原例子用的是像素，我这里为了实现自适应，改为了百分比。

  .lottery-kit {    padding:30px;    display: flex;    justify-content: center;    align-items: center;    background-image: url('../assets/images/lucky-bg.jpeg');    background-size: 100% 100%;    background-repeat: no-repeat;  }  /* 奖品列表的蒙层，根据抽奖动画选中的位置被显示出来 */  .lottery1 .prize__item__mask {    background-image: url('../assets/images/mask.png');    background-size: 100% 100%;    background-repeat: no-repeat;    border-radius: 10px;    background-color: transparent;    overflow: hidden;  }  /* 奖品图样式 */  .lottery1 .prize__item__image {    width: 100%;    height: 100%;  }  /* 九宫格组件样式 为了跟随羡慕的自适应方案 */  .lottery1 .lattice__lottery__box {    width: 100%;  }  /* 奖品块样式 为了跟随羡慕的自适应方案 */  .lottery1 .lattice__lottery__item {    width: 30%;    height: 30%;;    margin-bottom: 30px;    border: none;    font-size: 18px;    background-color: transparent;  }  /* 抽奖按钮 */  .lottery1 .lattice__lottery__btn {    margin-bottom:30px;    width: 30%;    height: auto;    border: none;    background-image: url('../assets/images/start-btn.png');    background-size: 100% 100%;    background-repeat: no-repeat;  }

其它就没什么了，一个很简单的功能，希望有用到这个场景的朋友可以参考一下。

#javascript##编程#

#头条创作挑战赛#