抽奖组件

1. 用法

  import { H5Draw } from 'h5-draw'
  import 'h5-draw/lib/h5-draw.css'
  Vue.use(H5Draw)

2. 公共配置项

| 参数名 | 类型 | 默认值 | 必填 | 说明 | | :-----| :---- | :----: | :---- | :---- | | width | Number | / | 是 | 抽奖区域宽度 | | height | Numebr | / | 是 | 抽奖区域高度 | | prizeList | Array | [] | 是 | 抽奖项数组集合 |

说明

prizeList 示例

  // prizeList
  [
    {
      img: '' // 奖品图片
    }
    ...
  ]

3. 事件

当抽奖完成后组件emit success事件，用法

    <!-- html -->
    <h5Draw @success="onDrawSuccess"></h5Draw>

    // js
    methods: {
      onDrawSuccess (e) {
        console.log(e)
      }
    }

个性化配置

1. marquee 九宫格抽奖

配置项

| 参数名 | 类型 | 默认值 | 必填 | 说明 | | :-----| :---- | :----: | :---- | :---- | | type | String | marquee | 是 | 抽奖类型 | | bgColor | String | #1E90FF| 否 | 外框背景色 | | bgShadowColor | String | transparent | 否 | 外框投影色 | | innerColor | String | #FFF2E3| 否 | 内框背景色 | | innerColor | String | #FFF2E3 | 否 | 内框背景色 | | hasDot | Boolean | true | 否 | 是否显示周围的灯 | | hasDrawBtn | Boolean | true | 否 | 是否显示抽奖按钮 | | btnPos | String | inner | 是 | 抽奖按钮位置（inner则按钮在九宫格内，outside则按钮在九宫格外） | | btnText | String | 抽奖 | 否 | 抽奖按钮文字 | | activeColor | String | #FEB00F | 是 | 奖项选中时的背景色 | | result | Number | 0 | 是 | 抽奖结果项对用的index |

2. blow 刮一刮抽奖

配置项

| 参数名 | 类型 | 默认值 | 必填 | 说明 | | :-----| :---- | :----: | :---- | :---- | | type | String | 'blow' | 是 | 抽奖类型 | | percentage | Number | 45 | 是 | 最大值为50，刮开百分之多少的时候开奖 | | touchSize | Number | 20 | 是 | 触摸画笔大小 | | fillColor | String | '#ddd' | 是 | 未刮开图层时的填充色 | | themeColor | String | 'pink' | 否 | 刮开后显示的背景色 | | result | String | '再接再励' | 是 | 刮开后显示奖项的文字 | | watermark | String | '刮一刮' | 否 | 水印文字 | | watermarkColor | String | '#c5c5c5' | 当watermark有值时，必填 | 水印文字颜色 | | watermarkSize | Number | 14 | 当watermark有值时，必填 | 水印文字大小 | | title | String | '刮一刮开奖' | 否 | 提示文字 | | titleColor | String | '#888' | 当title有值时，必填 | 提示文字颜色 | | titleSize | Number | 24 | 当title有值时，必填 | 提示文字大小 | | disabled | Boolean | false | 是 | 是否禁止刮卡 |

slot 插槽

• 可以使用slot对刮奖后的显示区域内容进行自定义，用法如下：

  <h5Draw>
    <slot name="result">
      <!-- 这里写自定义的页面结构 -->
    </slot>
  </h5Draw>

3. slot-machine 三格滚动抽奖

配置项

| 参数名 | 类型 | 默认值 | 必填 |说明 | | :-----| :---- | :----: | :---- | :---- | | type | String | 'slot' | 是 | 抽奖类型 | | direction | String | 'up' | 是 | 摇奖方向,可选:'up', 'down' | | delay | Number | 500 | 是 | 第二/三列动画延时时间，单位ms | | duration | Number | 4000 | 是 | 抽奖过程总时间，为了抽奖效果，不低于4000，单位ms | | prizeList | Array | 空数组 | 是 | 抽奖奖品列表 | | keyName | String | 空 | 是 | results数组中的数据对应的prizeList中的key名 | | results | Array | 空数组 | 是 | 中奖结果id集合数组 |

• results, key 示例

  // 如 prizeList 中的结构为 [ {id: '1', img: '...'}, ....]
  // results 值对应prizeList中的id则results 应设置为['1', ...]
  // key则设置为id