h5-draw

抽奖组件

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