vue插件实现刮刮乐效果（移动端 PC端）

效果

使用方法

1、使用npm下载安装插件

npm install lzy-scratch-card --save

2、在需要使用的页面引入组件

import scratchCard from 'lzy-scratch-card'components: {scratchCard},

3、在项目中使用

<template><div class="index-body"><scratch-card elementId="scratch" width="13.2rem" height="5.7rem" :moveRadius="15" :ratio="0.8":startCallback="startCallback" //开始刮时的回调函数:clearCallback="clearCallbackUp"//刮刮乐刮层全部清除后的回调函数coverImg="/sfiles/JinWei/scratch_music.png":result="result"style="position: absolute;top: 0;left: 0;top: 42.4%;left: 50%;transform: translate(-50%, -50%);"></scratch-card></div></template><script>import scratchCard from 'lzy-scratch-card'export default {components: {scratchCard},data() {return {result: "",//遮罩层下面的页面（html）注：以html标签字符串的样式写}},methods: {//开始刮时的回调函数startCallback(){},//刮刮乐刮层全部清除后的回调函数clearCallbackUp(){this.result = ""},},}</script>

4、参数及方法