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. leetCode刷题(找到两个数组拼接后的中间数)

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  2. Html5的表单元素

    表单是HTML中获取用户输入的手段,,对于web应用系统及其重要,文字是不能说明问题的: 直接上代码把: <!DOCTYPE html><html lang="en&quo ...

  3. Java基础：JVM垃圾回收算法

    众所周知,Java的垃圾回收是不需要程序员去手动操控的,而是由JVM去完成.本文介绍JVM进行垃圾回收的各种算法. 1. 如何确定某个对象是垃圾 1.1. 引用计数法 1.2. 可达性分析 2. 典型 ...

  4. Android 开发知识体系

    知识体系 1.Unix/Linux平台技术:基本命令,Linux下的开发环境 2.企业级数据库技术:SQL语言.SQL语句调优.Oracle数据库技术 3.Java 语言核心技术:Java语言基础.J ...

  5. Scrapy爬虫框架第一讲(Linux环境)

    1.What is Scrapy? 答:Scrapy是一个使用python语言(基于Twistec框架)编写的开源网络爬虫框架,其结构清晰.模块之间的耦合程度低,具有较强的扩张性,能满足各种需求.(前 ...

  6. [ Java面试题 ]基础篇之二

    1.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可能,"xyz"对 ...

  7. [CVPR 2017] Semantic Autoencoder for Zero-Shot Learning论文笔记

    http://openaccess.thecvf.com/content_cvpr_2017/papers/Kodirov_Semantic_Autoencoder_for_CVPR_2017_pap ...

  8. IDEA无法创建类，接口

    原因:模板丢失 解决方案: 在idea.exe.vmoptions 或 idea64.exe.vmoptions中加入配置-Djdk.util.zip.ensureTrailingSlash=fals ...

  9. 为什么选择Spring Boot作为微服务的入门级微框架

    摘要:1. Spring Boot是什么,解决哪些问题 1) Spring Boot使编码变简单 2) Spring Boot使配置变简单 3) Spring Boot使部署变简单 4) Spring ...

  10. spring-boot-oracle spring-batch

    Install/Configure Oracle express Oracle xe installer for linux (I don't care if you're running linux ...