LuckyCard

刮刮卡，通常用于抽奖活动场景。

示例
默认用法
  1. <nut-luckycard 
  2. content="1000万"
  3. ></nut-luckycard>

刮开层和背景层都支持自定义颜色，奖品信息支持HTML
  1. <nut-luckycard 
  2. coverColor="#F9CC9D" 
  3. backgroundColor="#C3D08B" 
  4. content="<em>1000<em><strong>元</strong>"
  5. ></nut-luckycard>

刮开层支持图片
  1. <nut-luckycard 
  2. content="1000万" 
  3. :coverImg="coverImage"
  4. ></nut-luckycard>

刮开面积超过设定比值（ratio）触发事件，可调用clearCover方法清除刮开层
  1. <nut-luckycard 
  2. content="再来一瓶" 
  3. :ratio="0.3" 
  4. @open= "cardOpen"
  5. ></nut-luckycard>

Props
参数说明类型默认值可选值
content奖品信息(必传)String''支持HTML
coverColor刮开层颜色String'#C5C5C5'—
coverImg把图片设为刮开层String''不支持跨域。设置此项后coverColor失效。
backgroundColor内容层背景颜色String'#FFFFFF'—
ratio触发事件的刮开比。Number0.5刮开面积超过此比例时触发事件。值介于0-1之间。
height卡片高度Number2单位rem
width卡片宽度Number4单位rem
fontSize中奖信息字号Number0.4单位rem
Events
事件名说明回调参数
open刮开面积达到指定比例（ratio）时触发的事件唯一参数是卡片对象，调用其clearCover方法可以清除刮开层所有可见像素