luck-roll v1.0.2

luck-roll

老虎机滚动形式抽奖

安装

npm i luck-roll -S
yarn add luck-roll

引入

/** 引入 */
import { luckRoll, luckPrize } from 'luck-roll'
import 'luck-roll/dist/luck-roll.min.css'

demo

在线demo page预览

<template>
  <div class="demo-dialSudoku">
    <luck-roll>
      <div class="game-wrap">
        <luck-prize ref="lottery" :speekSet="speekSet" :total="total" :awardNum="awardNum">
          <div class="game-item" v-for="(item, index) in speekSet" :key="index">
          </div>
        </luck-prize>
      </div>
    </luck-roll>
    <button class="toLottery" @click="toLottery()">随机</button>
    <button class="toLottery" @click="toLottery(4)">指定奖品</button>
  </div>
</template>

import { luckRoll, luckPrize } from '@/components/luck-roll'
export default {
  name: 'demo-dialSudoku',
  data () {
    return {
      speekSet: [1500, 1800, 2000], // 设置滚动速度
      total: 2128, // 奖品图总长度
      awardNum: 12 // 奖品图奖品个数
    }
  },
  components: {
    [luckRoll.name]: luckRoll,
    [luckPrize.name]: luckPrize
  },
  methods: {
    toLottery (idx) {
      if (idx) {
        let arr = [2, 2, 2]
        this.$refs.lottery.toRoll(arr)
      } else {
        let n1 = parseInt(Math.random() * 12 + 1)
        let arr = this.getArr(n1)
        this.$refs.lottery.toRoll(arr)
        console.log(n1, arr)
      }
    },
    getArr (n1) { // 生成随机数
      let n2 = parseInt(Math.random() * 12 + 1)
      let n3 = parseInt(Math.random() * 12 + 1)
      if (n1 === n2) {
        console.log('相同了')
        n2 === 1 ? n2 = n2 + 1 : n2 = n2 - 1
      }
      return [n1, n2, n3]
    }
  }
}

  .game-wrap{
    margin:auto;
    width: 566px;
    height:306px;
    overflow: hidden;
    background-image: url('../assets/tiger_bottom.png'); // 背景图片【必须】
    background-repeat:no-repeat;
    background-size: 100% 100%;
  }
  .game-item{
    height: 100%;
    width: 33.3%;
    background-image: url('../assets/gift_card2.png'); // 奖品图片【必须】
    background-size: 80% 2128px; // 高度必须正确且与参数total一致【必须】
    background-position: top center;
    background-repeat: repeat-y; // 重要设置【必须】
    transition-delay: 200ms;
  }

luck-prize

Prop

Event

function