js-刮刮卡效果，由jquery-eraser源码改的vue组件
vue-eraser
一款用于vue刮刮卡的组件
github地址： vue-eraser
npm地址： vue-eraser
在网上有看到过几个版本的组件，都有点问题
- 1、拉快了，就会断，连不起来（源码中是画的圆导致的这个问题，vue-eraser画的是线去解决不连贯的问题）
- 2、面积算得不准确
- 3、结果图片可能比覆盖图片加载得快，页面会先闪一下结果图片，然后再由canvas覆盖（在vue-eraser用到图片预加载去解决这个问题）
发现有一款jquery版的jquery-eraser，用起来很顺滑，于是我就研究了一下它的源码，把它改成了vue版的组件并且发布成npm包了，欢迎提bug。
install
npm install --save vue-eraser
Usage
1、通过import使用
import vueEaser from "vue-eraser";
2、通过script标签引入
vue-eraser
测试时当时用的图片链接可能失效请更换图片链接
property
| Name | Type | Default | Description |
|---|---|---|---|
| element-id | String | vueEraser | 该组件外层元素的id |
| size | Number | 50 | 清除的半径 |
| completeRatio | Number | 0.7 | 完成需要刮掉的面积占比 |
| completeFunction | Function | - | 达到completeRatio后的回掉函数 |
| progressFunction | Function | - | 刮的过程中的回掉函数，返回实时的面积占比 |
| resultSrc | String | http://cdn.dowebok.com/140/images/1.jpg | 刮刮卡结果区域的图片 |
| coverSrc | String | -(required) | 刮刮卡遮罩层的图片 |