grid-roll

多宫格抽奖

介绍

ui 和逻辑分离，组件封装了逻辑和宫格布局，让开发者只关注奖品和按钮的 ui 部分。grid-roll 有两种抽奖模式。

1. 默认模式为下标，startRoll 方法和 startIndex 属性会按下标进行索引和输出
2. 还有一种是pid模式，在 grid-prize 传入 pid,startRoll 方法和 startIndex 属性会根据 pid 进行索引和输出
3. 1.4.0 开始支持多抽宫格

安装

npm i grid-roll -S
yarn add grid-roll

引入

/** 引入 */
import { gridRoll, gridStart, gridPrize } from 'grid-roll'
import 'grid-roll/dist/grid-roll.min.css'

demo

在线 demo page 预览

grid-roll

抽奖有两种模式，一种是 index,另外一种是 pid

Prop

| 名称 | 说明 | 类型 | 默认值 | | ---------------- | -----------------------------------------------: | :------------: | :----: | | xy | 宫格 | String | 3*3 | | interval | 格子左右上下间隔 | String | 0px | | startIndex | 开始的奖品下标(默认为 0)或者 pid(默认第一个 pid) | any | - | | direction | 方向，r 为顺时针，l 为逆时针 | String | r | | circle | 圈数 | Number | 6 | | velocity | 速度，相当于定时器 | Number | 650 | | minVelocity | 滚动最小间隔上限，传 0 或者 false | Number/Boolean | 40 | | nextTimeInterval | 多选宫格时间间隔 | Number | 1000 |

Event

| 名称 | 说明 | 回调参数 | | -------- | -----------: | :--------------------: | | underway | 抽奖进行中 | index 或者 pid | | select | 每轮抽奖完成 | 当前轮次的抽奖值和下标 |

function

| 名称 | 说明 | 参数 | 回调参数 | | ------------ | :------------------------------------------------------------------------------------------: | :-------------------------------: | :----------------------------------------------------: | | startRoll | 抽奖 | 下标或者 pid(可以传数组,即为多抽) | 返回一个 Promise 实例，true 表示完成, false 表示进行中 | | continueRoll | 持续滚动 | - | - | | stopRoll | 停止滚动 | - | - | | initDom | 初始化抽奖格局，内部会自动调用一次，但如果碰到一些意外的情况，例如屏幕尺寸变化，可以再次调用 | - | - | | lamplight | 操作中奖的灯光开关 | [Boolean = false] | - |

grid-prize

Prop

| 名称 | 说明 | 类型 | 默认值 | | -------- | ---------------: | :-----: | :----: | | pid | 使用 pid 模式 | any | - | | disabled | 是否跳过这个奖品 | Boolean | - |

SlotScope

| 名称 | 说明 | 类型 | 默认值 | | -------- | ------------------------------------------------: | :-----: | :----: | | isSelect | 是否选中当前 grid-prize，用来修改选中的时候的样式 | Boolean | false |

<template>
  <div class="demo-dialSudoku">
    <div>
      <grid-roll ref="dial" @underway="handleUnderway" class="box">
        <grid-start slot="button">
          <div @click="handleStart" class="demo-box button-box">按钮</div>
        </grid-start>
        <grid-prize v-for="(item, index) in items" :key="index" slot="prize">
          <template slot-scope="{ isSelect }">
            <div class="demo-box" :class="isSelect ? 'select' : ''">
              <p>id：{{item.id}}</p>
              <p>text：{{item.text}}</p>
            </div>
          </template>
        </grid-prize>
      </grid-roll>
      <p>基本九宫格</p>
      <grid-roll
        ref="dial2"
        @underway="handleUnderway2"
        direction="l"
        xy="6*5"
        class="box"
        interval="3px"
        :startIndex="5"
      >
        <grid-start slot="button">
          <div @click="handleStart2" class="demo-box2 button-box2">按钮</div>
        </grid-start>
        <grid-prize
          v-for="(item, index) in items2"
          :key="index"
          :pid="item.id"
          slot="prize"
        >
          <template slot-scope="{ isSelect }">
            <div class="demo-box2" :class="isSelect ? 'select' : ''">
              <p>id：{{item.id}}</p>
              <p>text：{{item.text}}</p>
            </div>
          </template>
        </grid-prize>
      </grid-roll>
      <p>自定义宫格：6*5</p>
    </div>
  </div>
</template>

import { gridRoll, gridStart, gridPrize } from 'grid-roll'
import 'grid-roll/dist/grid-roll.min.css'
export default {
  name: 'demo-dialSudoku',
  data() {
    return {
      items: [],
      items2: []
    }
  },
  components: {
    [gridRoll.name]: gridRoll,
    [gridStart.name]: gridStart,
    [gridPrize.name]: gridPrize
  },
  created() {
    let arr = []
    for (let i = 0; i < 8; i++) {
      arr.push({
        id: i,
        text: i
      })
    }
    this.items = arr
    arr = []
    for (let i = 0; i < 18; i++) {
      arr.push({
        id: i,
        text: i
      })
    }
    this.items2 = arr
  },
  methods: {
    async handleStart() {
      let b = await this.$refs.dial.startRoll(3)
      console.log(b)
      if (b) {
        alert('恭喜你抽了个奖')
      }
    },
    handleUnderway(index) {
      console.log('进行中,index=' + index)
    },
    async handleStart2() {
      let b = await this.$refs.dial2.startRoll(7)
      console.log(b)
      if (b) {
        alert('恭喜你抽了个奖')
      }
    },
    handleUnderway2(id) {
      console.log('进行中,id=' + id)
    }
  }
}

<style lang="scss" scoped>
$zoom: .5;lang=scoped>$zoomlang=scoped>$zoom
$size: 200px * $zoom;$size
* {
  margin: 0;
  padding: 0;
}
.select {
  opacity: .4;
}
.demo-dialSudoku {
  p {
    font-size: 24px;
    text-align: center;
  }
  .box {
    margin-top: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
  .demo-box {
    width: 150px;
    height: 150px;
    font-size: 32px;
    text-align: center;
    font-weight: 600;
    border: 5px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    p {
      flex: 1 1 150px;
    }
  }
  .button-box {
    border-radius: 50%;
    width: 150px;
    height: 150px;
  }
  .demo-box2 {
    width: $size;
    height: $size;
    font-size: 42px * $zoom;
    text-align: center;
    font-weight: 600;
    border: 5px * $zoom solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    p {
      flex: 1 1 $size;
    }
  }
  .button-box2 {
    border-radius: 50%;
    width: 400px;
    height: 300px;
  }
}
</style>