刮刮乐移动、PC都适用的vue插件

刮刮乐、刮刮卡的轻松实现 一款超简单、超好用、适用于vue的组件

1.先看效果

2.基本用法

1.使用npm下载安装

npm install lzy-scratch-card --save

2.vue项目的引用

import scratchCard from 'lzy-scratch-card'

3.vue项目中使用

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

结束语

以上就是实现一个简单好用的刮刮乐的全部过程，希望对你有所帮助，有问题可以留言，我会及时解答