@kafan/vue-scratch-card v1.0.0

VueScratchCard 刮刮卡组件

介绍

插入刮刮卡组件

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

注意

本组件未将样式抽离，遂无法自动转换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

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