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. SQL Server 表的管理_关于数据增删查改的操作的详解（案例代码）

    SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)-DML 1.SQL INSERT INTO 语句(在表中插入) INSERT INTO 语句用于向表中插入新记录. SQL I ...

  2. DevOps之五 Tomcat的安装与配置

    安装说明 安装环境:CentOS-7 安装方式:源码安装 软件:apache-tomcat-9 下载地址:https://tomcat.apache.org/download-90.cgi 一.安装t ...

  3. java float double精度为什么会丢失？浅谈java的浮点数精度问题 【转】

    由于对float或double 的使用不当,可能会出现精度丢失的问题.问题大概情况可以通过如下代码理解: public class FloatDoubleTest { public static vo ...

  4. [ SSH框架 ] Struts2框架学习之四（自定义拦截器）

    一.Struts2的拦截器 1.1 拦截器概述 拦截器,在AOP( Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截 ...

  5. Spring Boot实战笔记（六）-- Spring高级话题（多线程）

    一.多线程 Springt通过任务执行器(TaskExecutor)来实现多线程和并发编程.使用ThreadPoolTaskExecutor可实现一个基于线程池的TaskExecutor.而实际开发中 ...

  6. Maven学习（三）-- 使用Maven构建项目

    摘自:http://www.cnblogs.com/xdp-gacl/p/4240930.html maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使用maven构建项 ...

  7. cmd登录远程Oracle数据库

    在cmd中输入  user/password@Ip:port/sid    例如:  laoda/123@192.168.4.161:1521/orcl      laoda是用户名,123是密码.

  8. 阿里云被挖矿进程wnTKYg入侵的解决方法

    杀wnTKYg病毒分两步,第一是找到它的来源,切断入口,第二步,找到它的守护进程并杀死,然后再去杀死病毒进程,有的守护进程很隐蔽,唤醒病毒之后,自动消亡,这时候top就看不到了,要留心. 最近项目在做 ...

  9. Anaconda下载及安装教程

    Anaconda官网 https://www.anaconda.com/download/#windows 选择Python 3.6版本 下一步,选择安装路径 下一步,两个方框打上对号,点击Insta ...

  10. rsyslog & syslog详解

    前言: rsyslog 是一个 syslogd 的多线程增强版.syslog是Linux系统默认的日志守护进程.默认的syslog配置文件是/etc/syslog.conf文件.程序,守护进程和内核提 ...