vue-scratch-card0

1.0.2 • Public • Published

vue-scratch-card

a vue component to scratch card

简介

刮刮卡vue组件,可在PC或移动端使用。

截图

scratchcard

Install

npm install --save vue-scratch-card

Usage

1.通过import使用

import ScratchCard from 'vue-scratch-card0'
Vue.use(ScratchCard)

<vue-scratch-card 
    element-id='scratchWrap'
    :ratio=0.5
    :move-radius=50
/>

2.通过标签<script>引用

<vue-scratch-card 
    element-id='scratchWrap'
    :ratio=0.5
    :move-radius=50
    :start-callback=startCallback
    :clear-callback=clearCallback
    cover-color='#caa'
  />

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
      el : '#app',
      data () {
        return {

        }
      },
      methods : {
        startCallback(){
          console.log('抽奖成功!')
        },
        clearCallback(){
          console.log('清除完毕!')
        }
      }
    })
</script>

属性

可以向vue-scratch-card组件传递的props值:

Name Type Default Description
element-id String scratch 可选,组件最外层DOM的id属性。如果页面中超多一次调用vue-scratch-card,必须传入该属性区分不同的刮刮卡组件
ratio Number 0.3 可选,要求刮掉的面积占比,达到这个占比后,将会自动把其余区域清除
start-callback Function 可选,第一次触碰到刮刮卡的函数。比如可以在这个函数中调取抽奖接口
clear-callback Function 可选,刮刮卡清除完毕后事件
cover-color String #C5C5C5 可选,刮刮卡遮罩层的颜色
cover-img String 可选,刮刮卡遮罩层图片,图片格式必须为base64
resul-img String 可选,刮刮卡结果区域的图片
move-radius Number 可选,刮刮清除的半径

插槽

组件还可以定制结果区域的DOM结构,插槽名为result

<VueScratchCard>
    <div slot='result'>
        恭喜您中大奖啦~~
    </div>
</VueScratchCard>

Readme

Keywords

none

Package Sidebar

Install

npm i vue-scratch-card0

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

103 kB

Total Files

14

Last publish

Collaborators

  • zengjieyi0214