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

项目地址

有任何问题欢迎提 issue

使用方法

npm install prize-turn-table

import turnTable from 'prize-turn-table'

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

demo 地址

组件抛出事件说明

• 当转盘停止转动时,组件抛出一个 @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 抽奖函数
  获取抽奖结果的函数,由父组件传递,默认取随机数 此函数必须有一个整型返回值,该返回值表示 prizeList 中中奖奖项的下标 此函数也可以返回包含中奖奖项下标的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 存在时此属性失效

• arrowSize:String 转盘指针大小 指定转盘中间指针图标的尺寸

• arrowImg: String 转盘指针图片 指定转盘中间指针图片

• continueRotate() 继续旋转函数 调用此函数转盘会继续旋转 spinConfig.duration 毫秒 调用方式：

    this.$refs.turnTable.continueRotate()