项目介绍

vue-guaguaka是一个基于vue开发的刮刮卡的通用组件

引入方式

npm i --save vue-guaguaka

yarn add vue-guaguaka

使用方法

引入组件

import guaguakaUi from 'vue-guaguaka'

在components中配置

components: {
    guaguakaUi
  }

在template中引入

<template>
  <vue-guaguaka
    ref="guaguaka"
    id="guaguakaDiv"
    :guaguakaConfig="guaguakaConfig"
    @success="guaguakaSuccess"
    @hideLoading="hideLoading">
  </vue-guaguaka>
</template>

1. guaguakaConfig为刮刮卡初始化的参数对象

• id：为刮刮卡div的id(必传)
• width： 设置刮刮卡的宽度（例如：100px）
• height：设置刮刮卡的高度（例如：100px）
• visibleArea：设置刮刮卡刮开率（单位%）
• curtainImg：设置刮刮卡覆盖层的图片（必须为同域名下的图片）
• prizeImg：设置刮刮卡奖品图片
• isTouch：设置刮刮卡初始化成功后是否可以刮动（true/false）
• touchSpotShow：设置刮刮卡是否显示刮片（true/false）
• touchSpotImg：设置刮刮卡刮片的图片
• touchSpotSize：设置刮刮卡刮动轨迹大小（例如：10px）
• touchSpotImgWidth：设置刮片的宽度（例如：100px）
• touchSpotImgHeight：设置刮片的高度（例如：100px）
• touchSpotPosition：设置涂刮的点位于刮片的位置的100%比（例如：0.1 0.1 则 为涂刮的点位于刮片宽度为10%高度为10%的位置）

事例
guaguakaConfig: {
  id: 'guaguakaDiv',
  width: 615px,
  height: 330px,
  visibleArea: 30,
  prizeImg: 'http://t2.hddhhn.com/uploads/tu/201610/198/scx30045vxd.jpg',
  isTouch: true,
  touchSpotImg: 'https://i.loli.net/2019/01/17/5c3fef16bbd5a.png',
  touchSpotSize: '20px',
  touchSpotImgWidth: '20px',
  touchSpotImgHeight: '20px',
  touchSpotPosition: '0.5 0.5',
  touchSpotShow: true
}

2. @success()为刮刮卡刮卡成功的回调方法

• 当用户刮开的比率>=初始化所设置的刮开率时，会返回该刮刮卡id（所以刮卡成功的操作可以在这里执行）

3. @hideLoading()为刮刮卡加载完成的回调方法

• 当刮刮卡覆盖层和奖品层设置好时返回该刮刮卡id(所有隐藏loading可以在这里执行)

4. setInfo()为调用设置刮刮卡信息的方法（需初始化后才可以调用）

• isTouch：设置刮刮卡是否可以刮动（true/false）
• touchSpotImg：设置刮刮卡刮片的图片
• touchSpotSize：设置刮刮卡刮动轨迹大小（例如：10px）
• touchSpotImgWidth：设置刮片的宽度（例如：100px）
• touchSpotImgHeight：设置刮片的高度（例如：100px）
• touchSpotPosition：设置涂刮的点位于刮片的位置的100%比（例如：0.1 0.1 则 为涂刮的点位于刮片宽度为10%高度为10%的位置）
• prizeImg：设置刮刮卡奖品图片

事例
this.$refs.guaguaka.setInfo({
  prizeImg: 'http://img.zcool.cn/community/[email protected]',
  touchSpotImg: 'https://i.loli.net/2019/01/17/5c3ffe3dbafa3.png',
  touchSpotImgWidth: '30px',
  touchSpotImgHeight: '30px',
  touchSpotPosition: '0.5 0.5',
  touchSpotSize: '20px',
  isTouch: false
})

设置一张新的刮刮卡可以这样（当isTouch为true时，即刮刮卡生成后可以马上刮动,不传或者为false时则不可刮动）
this.$refs.guaguaka.setInfo({
  prizeImg: 'http://img.zcool.cn/community/[email protected]'，
  isTouch: false
})