刮刮卡抽奖插件

插入刮刮卡组件

组件支持函数调用和组件调用

本组件未将样式抽离，遂无法自动转换rem，同时，由于本组件未设置全局变量去实时计算刮刮卡的数量动态变更Id，遂提供了 canvasParentId 和 canvasId 两个dom元素Id配置，若你需要添加多个刮刮卡，为防止Id冲突，这俩配置项将对你有用~

ScratchCard组件可添加props属性后直接插入使用，可自己在组件上添加自定义类名覆盖样式

import ScratchCard from '@kafan/vue-scratch-card' // 全局注册 Vue.use(ScratchCard) // 使用 <template> <v-scratchcard class="diyClassName" @scratchStart="start" @scratchEnd="end"> <!-- <template v-slot:prize> <p style="position:absolute;width:100%;height:100%;paddingBottom:10px;color:#333">可选插槽插入自定义内容</p> </template> --> </v-scratchcard> </template> <script> export default { methods:{ start(){ //do something }, end(){ //do something } } } </script> props

组件调用时， 支持传入以下 props：

组件调用时， 会触发以下事件，可供监听回调：

本组件有具名插槽prize供使用，即刮刮涂层下要显示的内容

示例

<template v-slot:prize> <p>可选插槽插入自定义内容</p> </template>

## 函数调用 ```js import ScratchCard from '@kafan/vue-scratch-card' ScratchCard({ canvasParentId:'ScratchCard_1', canvasId:'ScratchCard_1_canvas', targetContainer:document.querySelectorAll('.container')[0], slotScoped:()=>{ return { //指定插槽名字 "prize":{ tag:'p', data:{ style: { position:'absolute', width:'100%', height:'100%', color: '#333', background:'blue', paddingBottom: '10px' } }, text:'可选插槽插入自定义内容' } } }, onScratchStart(){ console.log('start'); }, onScratchEnd(){ console.log('end'); } }) //可赋值到Vue原型上供全局使用 Vue.prototype.$ScratchCard = ScratchCard options

函数调用时， 支持传入以下 options：

函数调用时， 有以下API方法可以调用：