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. Pascal Triangle

    Description: Given numRows, generate the first numRows of Pascal's triangle. For example, given numR ...

  2. 从有值的ID到汉字编码

    前些日子漫无目的地刷着朋友圈,突然一个ID从字丛中闯入我的眼睛--"某&字"(为保护当事人隐私,此处用'某''字'代替),浸淫于计算机而产生的直觉告诉我,这是一个有值的表达 ...

  3. API管理平台XXL-API

    <API管理平台XXL-API> 一.简介 1.1 概述 XXL-API是一个简洁易用API管理平台,提供API的"管理"."文档"."M ...

  4. STL-Map 源码剖析

    G++ ,cygnus\cygwin-b20\include\g++\stl_map.h 完整列表 /* * * Copyright (c) 1994 * Hewlett-Packard Compan ...

  5. URI和URL的区别 【转】

    源地址:http://www.cnblogs.com/gaojing/archive/2012/02/04/2413626.html 这两天在写代码的时候,由于涉及到资源的位置,因此,需要在Java ...

  6. Ubuntu16+pinpoint环境搭建

    最近研究了pinpoint,稍后放上环境搭建教程,建议想学习搭建的同学记得参考pinpointGitHub

  7. 登录测试用例sql语句注入

    利用SQL注入漏洞登录后台的实现方法 作者: 字体:[增加 减小] 类型:转载 时间:2012-01-12我要评论 工作需要,得好好补习下关于WEB安全方面的相关知识,故撰此文,权当总结,别无它意.读 ...

  8. 数据结构和算法总结（一）：广度优先搜索BFS和深度优先搜索DFS

    前言 这几天复习图论算法,觉得BFS和DFS挺重要的,而且应用比较多,故记录一下. 广度优先搜索 有一个有向图如图a 图a 广度优先搜索的策略是: 从起始点开始遍历其邻接的节点,由此向外不断扩散. 1 ...

  9. java客户端调用webService

    啥也不想说,以前使用的方法突然不行了.各种网搜(记得别忘记到jar包哦:axis.jar) 看代码,第一种方式,也就是以前的方式: 改方式不用表名参数名称 public static String i ...

  10. Mybatis中的逆向工程

    1. 准备工作 数据库驱动jar包, mybatis的jar包, 日志记录jar包 2. 配置文件 1. 在src的同级目录下配置generatorConfig.xml文件 <?xml vers ...