刮刮卡效果，由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";
"vueEraser"
    :size="25"
    coverSrc="http://cdn.dowebok.com/140/images/2.jpg"
    :completeFunction="completeFunction"
    :progressFunction="progressFunction"
>
复制代码

2、通过script标签引入

"en">
  
    "utf-8">
    "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    
    
  
  
    
"app">
        
测试时当时用的图片链接可能失效请更换图片链接
        "vueEraser"
        :size="50"
        :complete-ratio="0.5"
        :cover-src="coverSrc"
        :result-src="resultSrc"
        :complete-function="completeFunction"
        :progress-function="progressFunction"
        >
        
        "btn" @click="reset">reset
        "btn" @click="clear">clear
    



  


复制代码

property

Name	Type	Default	Description
element-id	String	vueEraser	该组件外层元素的id
size	Number	50	清除的半径
completeRatio	Number	0.7	完成需要刮掉的面积占比
completeFunction	Function	-	达到completeRatio后的回掉函数
progressFunction	Function	-	刮的过程中的回掉函数，返回实时的面积占比
resultSrc	String	cdn.dowebok.com/140/images/…	刮刮卡结果区域的图片
coverSrc	String	-(required)	刮刮卡遮罩层的图片

转载于:https://juejin.im/post/5c98e4a36fb9a070c8591646