lotteries

Introduction

抽奖组件，包含N宫格、大转盘，besed vue 2.x

Setup

yarn add lotteries -S

npm install lotteries -S

Example

git clone https://github.com/Laev/lotteries.git

cd lotteries && yarn && yarn serve

# then you can open http://localhost:8080/index

import

全局引入（vue 2.6.x）

// main.js

import Vue from 'vue'
import Lotteries from 'lotteries'
import 'lotteries/lib/index.css'

Vue.use(Lotteries)

局部引入 （vue 2.6.x）

demo.vue

<template>
  <div class="demo">
    <PrizeGrid ref="prizeGrid" :list="list" @onEnd="onEnd">
      <template #item="{ rows, index }">
        <div class="demo__item-wrap">
          <div class="demo__item">
            <p>ID: {{ rows.id }}</p>
            <p>index: {{ index }}</p>
            <p>{{ rows.name }}</p>
          </div>
        </div>
      </template>
      <template #button>
        <div class="demo__button-wrap" @click="startLottery">
          <div class="demo__button">立即抽奖</div>
        </div>
      </template>
    </PrizeGrid>
    <PrizeWheel ref="prizeWheel" :list="list" :isShowLight="false" @onStart="onStart">
      <template #item="{ rows }">
        <div class="demo__prize-text">
          <!-- 之所以分割，是因为css布局下的转盘不好控制文字刚好位于扇形内，因此目前只能依靠手动控制字数长度来保证显示边界稳定-->
          <p class="demo__prize-line-one">{{ rows.name | formatLineOne }}</p>
          <p class="demo__prize-line-two">{{ rows.name | formatLineTwo }}</p>
          <p class="demo__prize-line-three">{{ rows.name | formatLineThree }}</p>
        </div>
      </template>
    </PrizeWheel>
  </div>
</template>

<script>
import { PrizeGrid, PrizeWheel } from 'lotteries'
import 'lotteries/lib/index.css'

export default {
  name: 'demo',
  filters: {
    formatLineOne(name) {
      return name.substr(0, 6);
    },
    formatLineTwo(name) {
      return name.substr(6, 4);
    },
    formatLineThree(name) {
      const text = name.length > 12 ? name.substr(10, 2) + '...' : name.substr(10, 2);
      return text;
    }
  },
  data(){
    return {
      list: []
    }
  },
  components: {
    PrizeGrid,
    PrizeWheel
  },
  created() {
    this.list = new Array(8).fill({ id: 1, name: '' }).map((item, index) => {
      return { id: index + 1, name: '奖品' + index };
    });
  },
  methods: {
    startLottery() {
      // 生产过程中，此时为api请求后获取抽得奖品的id，调用实例方法start，入参类型number，入参值[primaryKey]
      this.$refs.prizeGrid.start(3);
    },
    onStart(){
      this.$refs.prizeWheel.start(7)
    },
    onEnd(winItem) {
      // 动画完成后处理一些交互，如弹窗提示等
      console.log(winItem)
    }
  }
}
</script>

API

PrizeGrid（宫格抽奖）

Props

| 参数 | 说明 | 类型 | 默认值 | | ----------- | ---------------------------- | ---------------- | ---------- | | list | 奖品数据（必填）注：当数据长度不满足最大可填充数量（有按钮时为 xy-(x-2)(y-2)，无按钮时为 xy）时，会自动填充”谢谢参与“数据，为防止数据结构不同导致组件运行时异常，建议使用时自备“谢谢参与”等数据后传入适合长度的数据 | array | [] | | disabledList | 禁用的[primaryKey]数组注: 禁用的数组在抽奖时即会跳过，一般的应用场景有：1、多次抽奖不抽到同一种奖品，2、随抽奖次数的叠加解锁更高级的奖品等 | array | [] | | primaryKey | 标记数据的唯一字段（推荐使用id） | string | "id" | | xy | 布局 | string | "3*3" | | gap | 奖品缝隙间隔 | number | 8 | | circle | 转动圈数 | number | 5 | | speed | 速度，必须大于0 | number | 0.4 | | rotate | 旋转方向 仅在hasButton为true时有效 | "clockwise" | "counterclockwise" | "clockwise" | | hasButton | 是否显示按钮 | boolean | true | | isRandom | 是否随机跳动 仅在hasButton为false时有效 | boolean | false | | containerBorder | 父容器边框 | number | 15 | | insiderBorder | 子容器边框 | number | 8 | | activeClass | 激活时的样式类名 | string | "prize-grid__item-wrap--active" | | shuffleFn | 洗牌算法 | function | Fisher-Yates 洗牌算法 |

Event

| 事件名 | 说明 | 回调参数 | | ------ | --------------------------------------------- | ---------------------- | | start | 实例方法，使用$ref调用，入参为primaryKey，开始动画 | | | onStart | 当未传入button slot时点击抽奖按钮触发 | | | onEnd | 当动画完成时触发 | value: 所选中奖品对象 |

Slots

| slot name | 说明 | | --------- | -------------------- | | item | 奖品容器（推荐使用） | | button | 抽奖按钮 |

PrizeWheel（转盘抽奖）

Props

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ---------------- | -------------------------------- | --------------------- | | list | 奖品数据（必填） | array | [] | | disabledList | 禁用的[primaryKey]数组 | array | [] | | primaryKey | 标记数据的唯一字段（推荐使用id） | string | "id" | | circle | 转动圈数 | number | 5 | | time | 动画运行时间，单位为毫秒，必须大于0 | number | 2000 | | rotate | 旋转方向 | "clockwise" |"counterclockwise" | "clockwise" | | isShowLight | 是否显示彩灯 | boolean | true | | lightNum | 彩灯数量 | number | 18 | | containerBorder | 父容器边框 | number | 18 | | shuffleFn | 洗牌算法 | function | Fisher-Yates 洗牌算法 |

Event

| 事件名 | 说明 | 回调参数 | | ------- | ------------------------------------- | --------------------- | | start | 实例方法，使用$ref调用，入参为primaryKey，开始动画 | | | onStart | 当未传入button slot时点击抽奖按钮触发 | | | onEnd | 当动画完成时触发 | value: 所选中奖品对象 |

Slots

| slot name | 说明 | | --------- | -------------------- | | item | 奖品容器（推荐使用） | | button | 抽奖按钮 |

License

MIT