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

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

https://h5-group.github.io/lattice-lottery/guide/#%E4%BB%8B%E7%BB%8D

最终实现的效果如下：

大致的实现思路如下：

组件的封装

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

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

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

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

• 奖品数量因为要凑满九宫格，所以在扣除中间的按钮后，要指定八个奖品
• 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##编程#

#头条创作挑战赛#