h5-draw v1.0.0

抽奖组件

1. 用法

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

2. 公共配置项

说明

prizeList 示例

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

3. 事件

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

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

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

个性化配置

1. marquee 九宫格抽奖

配置项

2. blow 刮一刮抽奖

配置项

slot 插槽

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

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

3. slot-machine 三格滚动抽奖

配置项

• results, key 示例

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