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";

<vue-eraser

    ref="vueEraser"

    :size="25"

    coverSrc="http://cdn.dowebok.com/140/images/2.jpg"

    :completeFunction="completeFunction"

    :progressFunction="progressFunction"

></vue-eraser>

2、通过script标签引入

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

    <title>vue-eraser</title>

    <style>

        *{

            margin: 0;padding: 0;

        }

        #app{

            width: 600px;

            margin: 50px auto;

        }

        .btn:nth-of-type(1){

            margin-top: 10px;

            display: inline-block;

            width: 100px;

            height: 40px;

            background-color: #2d8cf0;

            color: #fff;

            font-size: 16px;

            text-align: center;

            line-height: 40px;

            border: none;

            touch-action: manipulation;

            font-weight: 400;

            cursor: pointer;

            white-space: nowrap;

            user-select: none;

            border-radius: 4px;

            transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;

        }

        .btn:nth-of-type(2){

            margin-top: 10px;

            margin-top: 10px;

            display: inline-block;

            width: 100px;

            height: 40px;

            background-color: #19be6b;

            color: #fff;

            font-size: 16px;

            text-align: center;

            line-height: 40px;

            border: none;

            touch-action: manipulation;

            font-weight: 400;

            cursor: pointer;

            white-space: nowrap;

            user-select: none;

            border-radius: 4px;

            transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;

        }

    </style>

  </head>

  <body>

    <div id="app">

        <h3>测试时当时用的图片链接可能失效请更换图片链接</h3>

        <vue-eraser

        ref="vueEraser"

        :size="50"

        :complete-ratio="0.5"

        :cover-src="coverSrc"

        :result-src="resultSrc"

        :complete-function="completeFunction"

        :progress-function="progressFunction"

        >

        </vue-eraser>

        <button class="btn" @click="reset">reset</button>

        <button class="btn" @click="clear">clear</button>

    </div>

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>

<script src="vue-eraser/dist/vue-eraser.js"></script>

<script>

new Vue({

    el: "#app",

    data (){

        return {

            coverSrc: 'https://img.zcool.cn/community/01f5795541d50b00000115410b205a.jpg@1280w_1l_2o_100sh.jpg',

            resultSrc:"http://exueshi.oss-cn-hangzhou.aliyuncs.com/productLogo/2019-2-26-1551143063378.jpg"

        }

    },

    mounted() {

    },

    methods: {

        completeFunction (ratio){

            console.log("complete");

        },

        progressFunction (ratio){

            console.log(ratio);

        },

        reset (){

            this.$refs.vueEraser.reset();

        },

        clear(){

            this.$refs.vueEraser.clear();

        }

    },

});

</script>

  </body>

</html>

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) 刮刮卡遮罩层的图片

js-刮刮卡效果，由jquery-eraser源码改的vue组件的更多相关文章

  1. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  2. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  3. 【深入浅出jQuery】源码浅析2--使用技巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  4. jQuery.attributes源码分析(attr/prop/val/class)

    回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...

  5. 【学】jQuery的源码思路1——后代选择器

    jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...

  6. 深入分析，理解jQuery.Deferred源码

    前言: 如果你对jQuery.Callback回调对象不了解,或者只掌握其方法,但是没有通过阅读源码理解,可以先阅读 前一章jQuery.Callbacks源码解读二,因为只有完全理解jQuery.C ...

  7. jQuery.Callbacks 源码解读二

    一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...

  8. （转）【深入浅出jQuery】源码浅析2--奇技淫巧

    [深入浅出jQuery]源码浅析2--奇技淫巧 http://www.cnblogs.com/coco1s/p/5303041.html

  9. wpf 模拟3D效果(和手机浏览图片效果相似)（附源码）

    原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...

随机推荐

  1. java之Hibernate框架实现数据库操作

    之前我们用一个java类连接MySQL数据库实现了数据库的增删改查操作---------MySQL篇: 但是数据库种类之多,除了MySQL,还有Access.Oracle.DB2等等,而且每种数据库语 ...

  2. SOFA 源码分析 — 泛化调用

    前言 通常 RPC 调用需要客户端使用服务端提供的接口,而具体的形式则是使用 jar 包,通过引用 jar 包获取接口的的具体信息,例如接口名称,方法名称,参数类型,返回值类型. 但也存在一些情况,例 ...

  3. cocos2dx中的坐标系统

    一. (1)OpenGL坐标系 Cocos2D-x以OpenGL和OpenGL ES为基础,所以自然支持OpenGL坐标系.该坐标系原点在屏幕左下角,x轴向右,y轴向上. (2)屏幕坐标系 屏幕坐标系 ...

  4. C/C++静态代码安全检查工具

    静态代码安全检查工具是一种能够帮助程序员自动检测出源程序中是否存在安全缺陷的软件.它通过逐行分析程序的源代码,发现软件中潜在的安全漏洞.本文针对 C/C++语言程序设计中容易存在的多种安全问题,分别分 ...

  5. Ubuntu命令操作

    1../ 当前路径2.ls 列举当前路径下的所有文件及文件夹 默认情况不显示隐藏文件 ls -a 显示隐藏文件 ls -lah h是文件大小 l是显示文件3.cd 跳转路径4.pwd 查看当前所在路径 ...

  6. TCP连接和 time_wait、close_waite

    TCP连接和 time_wait.close_waite tags:time_wait close_waite RST TCP 引言:前两天朋友公司的服务器垮掉了,最后查出的原因是发现大量的time_ ...

  7. JAVA中写时复制(Copy-On-Write)Map实现

    1,什么是写时复制(Copy-On-Write)容器? 写时复制是指:在并发访问的情景下,当需要修改JAVA中Containers的元素时,不直接修改该容器,而是先复制一份副本,在副本上进行修改.修改 ...

  8. 并发库应用之十三 & 并发集合类的应用

    传统集合实现同步的问题 举了一个例子:Map集合线程不同步导致的问题. 解决办法:使用同步的Map集合 使用集合工具类中的方法将不同步的集合转为同步的Collections.synchronizedM ...

  9. 解决vi上下左右变ABCD问题

      第一步执行sudo apt-get install vim,如果没有出现错误,再次进入vi 尝试一下,看看有没有修改过来,如果出现以下错误E: Package 'vim' has no insta ...

  10. javascript进阶

    BOM操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...