0.1.18 • Published 9 months ago
lcap-lucky-draw v0.1.18
LcapLuckyDraw 九宫格抽奖
Other
九宫格抽奖组价
示例
基本用法
<lcap-lucky-draw
block1_name=""
block3_name="奖品3"
block4_name="奖品4"
block5_name="奖"
block6_name="奖品6"
block7_name="奖品7"
block8_name="奖品8"
font_color="#FFFFFF"
font_top_padding="20px"
font_size="10px"
>
</lcap-lucky-draw>控制默认抽奖结果弹窗开启，默认关闭, 回填文本为设置的奖品名称
<lcap-lucky-draw
block1_name=""
block3_name="奖品3"
block4_name="奖品4"
block5_name="奖"
block6_name="奖品6"
block7_name="奖品7"
block8_name="奖品8"
font_color="#FFFFFF"
font_top_padding="20px"
font_size="10px"
:prize_popup=true
>
</lcap-lucky-draw>直接传入指定抽奖结果，设置后下方传入的概率无效
<lcap-lucky-draw
block1_name="奖品1"
block2_name="奖品2"
block3_name="奖品3"
block4_name="奖品4"
block5_name="奖品5"
block6_name="奖品6"
block7_name="奖品7"
block8_name="奖品8"
font_color="#FFFFFF"
font_top_padding="20px"
font_size="20px"
return_prize="奖品4"
>
</lcap-lucky-draw>通过设置概率控制抽奖结果, 数值可以简单的理解成库存，各项会自动计算占比转化为概率
<lcap-lucky-draw
block1_name="奖品1"
block2_name="奖品2"
block3_name="奖品3"
block4_name="奖品4"
block5_name="奖品5"
block6_name="奖品6"
block7_name="奖品7"
block8_name="奖品8"
:block1_chance=10
:block2_chance=10
:block3_chance=10
:block4_chance=10
:block5_chance=10
:block6_chance=10
:block7_chance=10
:block8_chance=10000
font_color="#FFFFFF"
font_top_padding="20px"
font_size="20px"
>
</lcap-lucky-draw>API
Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
|---|---|---|---|---|
| width | string | '375px' | 设置九宫格宽度 | |
| height | string | '375px' | 设置九宫格高度 | |
| return_prize | string | '' | 后端返还的奖品信息，设置后各自的抽奖概率无效 | |
| prize_popup | boolean | false | 是否开启默认中奖弹窗 | |
| background_color | string | '' | 设置背景颜色（例：#FFFFFF） | |
| start_img | image | '' | 设置抽奖开始按钮图片 | |
| font_color | string | '' | 设置所有奖品文字的图片颜色 | |
| font_top_padding | string | '60px' | 设置奖品文字距离顶部的距离（默认：60px） | |
| font_size | string | '22px' | 设置奖品文字距离顶部的距离（默认：22px） | |
| block1_img | image | '' | 设置格子1奖品图片 | |
| block1_name | string | '奖品1' | 设置格子1的奖品名字 | |
| block1_chance | number | '10' | 设置奖品1的中奖概率 | |
| block2_img | image | '' | 设置格子2奖品图片 | |
| block2_name | string | '奖品2' | 设置格子2的奖品名字 | |
| block2_chance | number | '10' | 设置奖品2的中奖概率 | |
| block3_img | image | '' | 设置格子3奖品图片 | |
| block3_name | string | '奖品3' | 设置格子3的奖品名字 | |
| block3_chance | number | '10' | 设置奖品3的中奖概率 | |
| block4_img | image | '' | 设置格子4奖品图片 | |
| block4_name | string | '奖品4' | 设置格子4的奖品名字 | |
| block4_chance | number | '10' | 设置奖品4的概率 | |
| block5_img | image | '' | 设置格子5奖品图片 | |
| block5_name | string | '奖品5' | 设置格子5的奖品名字 | |
| block5_chance | number | '10' | 设置奖品5的中奖概率 | |
| block6_img | image | '' | 设置格子6奖品图片 | |
| block6_name | string | '奖品6' | 设置格子6的奖品名字 | |
| block6_chance | number | '10' | 设置奖品6的中奖概率 | |
| block7_img | image | '' | 设置格子7奖品图片 | |
| block7_name | string | '奖品7' | 设置格子7的奖品名字 | |
| block7_chance | number | '10' | 设置奖品7的中奖概率 | |
| block8_img | image | '' | 设置格子8奖品图片 | |
| block8_name | string | '奖品8' | 设置格子8的奖品名字 | |
| block8_chance | number | '10' | 设置奖品8的中奖概率 |
Events
@start
抽奖时开始时触发
@end
抽奖时结束时触发
| Param | Type | Description |
|---|---|---|
| $event | any | 返还奖品 |