# turn-table

**Repository Path**: eathertoo/turn-table

## Basic Information

- **Project Name**: turn-table
- **Description**: 抽奖大转盘vue组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-09-16
- **Last Updated**: 2024-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# turn-table 是一个抽奖大转盘的 vue 组件

##### [项目地址](https://github.com/EatherToo/turn-table)

### 有任何问题欢迎提 issue

## 使用方法

```
npm install prize-turn-table

import turnTable from 'prize-turn-table'

<turn-table :prize-list="prizeList"></turn-table>

```

#### [demo 地址](https://eathertoo.github.io/turn-table/)

![demo.gif](https://raw.githubusercontent.com/EatherToo/turn-table/pages/asserts/demo.gif)

### 组件抛出事件说明

- 当转盘停止转动时,组件抛出一个 `@rotate-over` 事件,同时带出一个整型值,该值为中奖奖项在 prizeList 中的下标
- 转盘开始转动之前,组件抛出一个 `@rotate-start` 事件

### 组件 slot 说明

- 组件有一个 slot, `centerText` 显示在指针图标的中间,用法如下:

  ```
  <turnTable>
      <span slot="centerText">100次</span>
    </turnTable>
  ```

### 组件属性说明

- `size:Number | String` 转盘大小
  接收数字类型或字符串类型的数据  
  此属性类型为字符串时,此字符串必须是 px,rem 结尾的字符串  
  此属性类型为数字时单位默认为 px;
- `prizeList: Array` 奖品列表  
  说明: 当奖品个数为单数时会自动补一个 **谢谢惠顾** 选项
  格式为:
  ```
  {
    icon: '', // 奖品图片
    name: "奖品1", // 奖品名称
  },
  {
    icon: '',
    name: "奖品2"
  },
  ```
- `getPrize: Function` 抽奖函数  
  获取抽奖结果的函数,由父组件传递,默认取随机数
  此函数必须有一个整型返回值,**<font color="red">该返回值表示 prizeList 中中奖奖项的下标</font>**
  此函数也可以返回包含中奖奖项下标的`Promise`
  若抽奖失败,函数返回值需为`-1`
  示例:
  ```
  // 获取抽奖结果函数
    async getPrizeFunc () {
      return new Promise((resolve, reject) => {
        this._getPrize().then(data => {
          for (let i = 0; i < this.gameInfo.prizeMap.length; i++) {
            if (this.gameInfo.prizeMap[i].id === data.prizeId) {
              resolve(i)
            }
          }
          // 抽奖结果不在奖品列表中
          resolve(-1)
        }).catch(e => {
          // 抽奖失败返回-1给转盘组件
          resolve(-1)
          this.$refs.gameBasic.showPrizeText('提示', e.msg || e.message)
        })
      })
    }
  ```
- `count: Number` 抽奖次数
- `spinConfig: Object` 装盘旋转参数,有三个属性
  ```
  {
    duration: 4000, // 旋转时间
    circle: 8, // 旋转圈数
    mode: 'ease-out' // 过渡类型 (详情请查看MDN transition属性说明)
  }
  ```
- `strict: Boolean` 严格模式  
  此属性为 true 时,指针停止在扇形的随机位置  
  此属性为 false 时,指针停留在扇形的中间

- `ifBackImg: Boolean` 是否加上背景图片
  此属性为 true 时,有转盘背景图片  
  此属性为 false 时,无转盘背景图片

- `colors: Array` 抽奖扇形间隔背景颜色选项
  示例：
  ```
  [
    '#FFFFFF',
    '#F96C1C'
  ]
  ```
- `textColors: Array` 抽奖扇形间隔文字颜色选项
  示例：

  ```
  [
    '#F96C1C',
    '#FFFFFF'
  ]
  ```

- `backImg:String`　背景图片
  说明：仅当`ifBackImg`值为`true`时生效，若未指定值则取用默认值
- `ifCenterText:Boolean` 是否展示转盘中间文字  
  当 slot centerText 存在时此属性<font color="red">失效</font>

- `arrowSize:String` 转盘指针大小
  指定转盘中间指针图标的尺寸
- `arrowImg: String` 转盘指针图片
  指定转盘中间指针图片

- `continueRotate()` 继续旋转函数
  调用此函数转盘会继续旋转 `spinConfig.duration` 毫秒
  调用方式：
  ```
    this.$refs.turnTable.continueRotate()
  ```