在 Vue 3 中实现刮刮乐抽奖

🎉 在 Vue 3 中实现刮刮乐抽奖

当项目中需要做一些活动互动页时，需要实现刮刮乐，请看如下效果：

这里感谢github用户Choicc分享的组件，具体可点击传送门查看

1. 引入组件

将/src/components下ScratchCard.vue复制到自己的项目中，
在需要使用组件的页面中引入

<script setup>
import StratchCard from "./components/StratchCard.vue";
const scratchStart = ()=>{console.log('scratchStart')
}
const scratchEnd = ()=>{console.log('scratchEnd')
}
const scratchAll = ()=>{console.log('scratchAll')
}
</script><template><StratchCardmaskColor="skyblue"fillStyle="red"font="30px 微软雅黑"text="刮一刮文字":radius="5":scratchRadius="20":scratchPercent="80"@scratchStart="scratchStart"@scratchEnd="scratchEnd"@scratchAll="scratchAll"><!-- 自定义奖品内容插槽 --><div class="prize">我的奖品</div></StratchCard>
</template>
<style scoped>
* {margin: 0;padding: 0;
}
.prize {width: 80vw;height: 45vw;display: flex;align-items: center;justify-content: center;background: lightcoral;
}
</style>

⬇️ 对应的参数说明

参数名	说明	类型	默认值	备注
maskColor	刮奖图层背景颜色	String	'#cccccc'	当 imageUrl 非空时会被覆盖
text	刮奖图层文字	String	'刮一刮'	当 imageUrl 非空时会被覆盖
fillStyle	刮奖图层文字颜色	String	'#000000'	-
font	刮奖图层字体	String	'18px Arial'	-
imageUrl	刮奖图层使用图片	String	-	会覆盖掉刮奖图层文字
radius	刮奖图层圆角	Number	0	-
scratchRadius	刮奖半径	Number	10	刮奖时每次可刮的区域半径
scratchPercent	刮开占比	Number	80	刮开面积达到该百分比后自动移除刮奖图层

⬇️ events事件如下

事件名	说明	备注
scratchStart	开始刮卡时	手指触控或鼠标按下时触发
scratchEnd	刮卡结束时	手指离开或鼠标抬起时触发
scratchAll	刮光全部时	刮刮卡被刮完时触发

⬇️ methods

方法名	说明	备注
reset	重置刮刮乐	stratchCardRef.value?.reset()

我在基础上加了两个参数disabled和defaultRemove

参数名	说明	类型	默认值	备注
disabled	禁用刮奖	Boolean	false	–
defaultRemove	是否显示图层	Boolean	false	–

像我上面实现的效果来说，默认是没有蒙层的，需要点击开始洗牌后才会出现蒙层，这个时候需要加上defaultRemove来控制蒙层的显示隐藏，
当开始刮其中一个刮刮乐不能再刮其他的，或者说要刮完某一个才能继续下一个，这个时候需要使用disabled来禁用插件