vue实现宫格轮转抽奖

vue实现宫格轮转抽奖(类似穿越火线的xx轮回)，供大家参考，具体内容如下

不做过多的解说，直接上代码啦。关键的代码都写了注释，很容易理解。直接复制即可使用！
另外css部分依赖 node-sass、sass-loader,没有安装的安装一下，已有的小伙伴直接跳过~~

"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",

<template>  <div class="home">    <div class="home-container">      <div class="home-container-line">        <div          class="home-container-line-box"          v-for="item in list.slice(0, 5)"          :key="item.index"          :class="{ selected: item.active }"        >          {{ item.label }}        </div>      </div>      <div c: relative;        flex: 3;        overflow: hidden;        margin: 5px 3px 3px 3px;        @extend .center;        boxIQlVXr-shadow: 0 1px 10px 0px #cf5531;        background-image: linear-gradient(          25deg,          #cf5531,          #d0853a,          #cdaf43,          #c4d84d        );        cursor: pointer;        &:active {          background-image: linear-gradient(            25deg,            #3f3e41,            #6d6340,            #9a8b39,            #c9b629          );        }        &::before {          position: absolute;          content: "点击抽奖";          font-size: 2.5rem;          color: #fff;          font-weight: bold;        }      }    }  }}.selected {  background: rgba($color: #f6e58d, $alpha: 0.5);  animation-name: twinkle;  animation-duration: 3s;  animation-iteration-count: infinite;}@keyframes twinkle {  0%   {background:#ffbe76;} 100% {background:#f6e58d;}}</style>

效果图：

最后特别说明一下，概率完全是随机的。目前还没有特别好的思路去调整中奖的概率，如果有比较好的想法的小伙伴们也非常欢迎一起来探讨一下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。