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

liuzhenyong
2,934 阅读2分钟

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

1.先看效果

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 刮刮乐遮罩图片（设置这个后，coverColor就不起作用了） string(网络图片) liquid-games.oss-cn-beijing.aliyuncs.com/single_game…
result 中奖的结果 string（最好用html，用的时候更好控制结果显示） 
<p style="height:100%;width:100%;display:flex;justify-content:center;align-items:center;color:red;font-size:50px;text-align:center;background:#666666;border-radius:12px;"><span>恭喜中奖<span></p>

tips: 组件中的rem转换是以375px设计稿为基础，以1rem = 100px 进行转换的，用于移动端时，小伙伴们要注意转换关系

2.方法

方法 说明 类型
startCallback 开始刮时的回调函数 function
clearCallback 刮刮乐刮层全部清除后的回调函数 function

结束语

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

avatar
文章
阅读
粉丝