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. SVD的概念以及应用

    第十四章 利用SVD简化数据 一．引言 SVD的全称是奇异值分解,SVD的作用是它能够将高维的数据空间映射到低维的数据空间,实现数据约减和去除噪声的功能. SVD的特点主要有以下几个方面: 1.它的优 ...

  2. Java多线程：wait(),notify(),notifyAll()

    1. wait(),notify(),notifyAll() 2. wait() 2.1. wait() 2.2. wait(long timeout) 2.3. wait(long timeout, ...

  3. Nginx负载均衡和反向代理

    1:反向代理 代理就是中介,那有反向代理就有正向代理,两者的区别是什么嘞? 正向代理隐藏真实客户端,服务端不知道实际发起请求的客户端.,proxy和client同属一个LAN,对server透明: 反 ...

  4. 分析DuxCms之AdminUserModel

    /** * 获取信息 * @param array $where 条件 * @return array 信息 */ public function getWhereInfo($where) { ret ...

  5. mac下安装windows系统

    前言:我装win系统的原因很简单,就是某天突然想玩qq宠物了(不要嘲笑,自行尴尬一波)... 下面进入正题: 1.我的当前系统版本: 其实App Store 上新版本的os系统也已经出来很长一段时间了 ...

  6. mysql数据库死锁的产生原因及解决办法

    这篇文章主要介绍了mysql数据库锁的产生原因及解决办法,需要的朋友可以参考下   数据库和操作系统一样,是一个多用户使用的共享资源.当多个用户并发地存取数据 时,在数据库中就会产生多个事务同时存取同 ...

  7. PAT1097:Deduplication on a Linked List

    1097. Deduplication on a Linked List (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 ...

  8. linux中~/cut/argus/

    1.Linux shell 截取字符变量的前8位 实现方法有如下几种: expr substr "$a" 1 8 echo $a|awk '{print substr(,1,8)} ...

  9. SSM-SpringMVC-02：SpringMVC最简单的小案例

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 咱们这个案例做什么? 就是用处理器代替Servlet处理请求 开发步骤: 1.引入jar包 <!--单 ...

  10. SSM-Spring-13：Spring中RegexpMethodPointcutAdvisor正则方法切入点顾问

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- RegexpMethodPointcutAdvisor:正则方法切入点顾问 核心: <property ...