// main.js

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

Vue.use(Lotteries)

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>