效果
使用方法
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、参数及方法
如果觉得《vue插件实现刮刮乐效果(移动端 PC端)》对你有帮助,请点赞、收藏,并留下你的观点哦!