一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第三天，点击查看活动详情。
前言
由于笔者项目的需要，必须要开发一个刮刮奖抽奖系统，但苦恼于如何实现。首先，在网上查询时看到了canvas标签的方法，但比较晦涩难懂。后来，在网上寻找到了一个vue的刮刮奖组件，相对比较好用，笔者在此教大家来安装使用。
原理
在介绍这个组件之前，先来简单描述一下刮刮奖实现的原理是什么。首先，我们先将其分为遮罩层和奖品层。原理就是像用橡皮擦擦掉遮罩层，把奖品层展示在下面。
实现
首先，引入组件
1、使用npm下载安装插件
npm install lzy-scratch-card --save
2、在需要使用的页面引入组件
//在需要的组件局部引入
import scratchCard from 'lzy-scratch-card'
components: {
scratchCard
},
3.组件中使用
<template>
<scratch-card
elementId="scratch"
width="246px"
height="102px"
:moveRadius="15"
:ratio="0.7"
:startCallback="startCallback"
:clearCallback="clearCallbackUp"
:coverImg="require('../assets/overlay.png')"
coverColor="#ff0000"
:result="result"
style="
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
"
>
</scratch-card>
</template>
<script>
import scratchCard from "lzy-scratch-card";
export default {
name:"guaguajiang",
components:{
scratchCard
},
data () {
return {
prize,
result:
`<div style=" background-color: #FFE2B7;width: 246px;height: 102px; border-radius: 5px;text-align: center;"><div style="font-size: 17px;color:#FE3555;font-weight: Bold;padding-top: 24px;">—— 恭喜获得 ——</div><div style=" font-size: 14px;color: #333333;line-height: 21px;margin-top: 14px;">${prize}<span style="color:#FE3555">扫码领5代金券</span></div></div>`,
//遮罩层下面的页面（html）注：以html标签字符串的样式写
}
},
methods: {
//开始刮时的回调函数
startCallback() {},
//刮刮乐刮层全部清除后的回调函数
clearCallback() {},
}
}
</script>
4.实现效果（奖品层也可以是图片）
5.参数及其方法说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elementId | 组件最外层DOM的id属性，区分单个页面多次使用刮刮乐 | String | elementId |
| width | 组件宽度 | String | 254px |
| height | 组件高度 | String | 134px |
| moveRadius | 刮卡范围 | Number | 15 |
| ratio | 要求刮掉的面积占比，达到这个占比后，将会自动把其余区域清除 | Number | 0.8 |
| coverColor | 刮刮乐遮罩颜色 | String | #fff |
| coverImg | 刮刮乐遮罩图片 | string(网络图片，设置这个后，coverColor就不起作用了) | - |
| result | 中奖的结果 | string（最好用html，用的时候更好控制结果显示 | - |
| 方法 | 说明 | 类型 |
|---|---|---|
| startCallback | 开始刮时的回调函数 | function |
| clearCallback | 刮刮乐刮层全部清除后的回调函数 | function |
总结
以上就是通过组件实现刮刮奖的方式，但通过组件终究没有理解其实现的原理，下期笔者将尝试用传统方式（canvas）来实现
