刮刮乐、刮刮卡的轻松实现 一款超简单、超好用、适用于vue的组件
1.先看效果
image
2.基本用法
1.使用npm下载安装
npm install lzy-scratch-card --save
2.vue项目的引用
import scratchCard from 'lzy-scratch-card'
3.vue项目中使用
<scratch-card
elementId="scratch"
width="600px"
height="300px"
:moveRadius="15"
:ratio="0.5"
:startCallback="startCallback"
:clearCallback="clearCallbackUp"
coverColor="#222222"
coverImg="https://liquid-games.oss-cn-beijing.aliyuncs.com/single_game_images/entertainment/scratch_card_mask_up.png"
:result="result"
>
</scratch-card>
3.参数及方法解析
1.参数
| 参数值 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elementId | 组件最外层DOM的id属性，区分单个页面多次使用刮刮乐 | string | scratch |
| width | 刮刮卡宽度 | string(可以传px的单位值，也可以传rem的单位值) | 600px |
| height | 刮刮卡高度 | string(可以传px的单位值，也可以传rem的单位值) | 300px |
| moveRadius | 每次刮卡的范围 | number | 15 |
| ratio | 要求刮掉的面积占比，达到这个占比后，将会自动把其余区域清除 | number | 0.5 |
| coverColor | 刮刮乐遮罩颜色 | string | #C5C5C5 |
| coverImg | 刮刮乐遮罩图片 | string（网络图片，设置这个后，coverColor就不起作用了） | -------------------- |
| result | 中奖的结果 | string（最好用html，用的时候更好控制结果显示 | ------------------ |
tips: 组件中的rem转换是以375px设计稿为基础，以1rem = 100px 进行转换的，用于移动端时，小伙伴们要注意转换关系
2.方法
| 方法 | 说明 | 类型 |
|---|---|---|
| startCallback | 开始刮时的回调函数 | function |
| clearCallback | 刮刮乐刮层全部清除后的回调函数 | function |
结束语
以上就是实现一个简单好用的刮刮乐的全部过程，希望对你有所帮助，有问题可以留言，我会及时解答
