js-刮刮卡效果，由jquery-eraser源碼改的vue組件

時間 2019-12-12

標籤刮刮卡效果 jquery eraser 源碼 vue 組件欄目 JavaScript 简体版

原文原文鏈接

vue-eraser

一款用於vue刮刮卡的組件css

github地址： vue-eraser
npm地址： vue-eraserhtml

在網上有看到過幾個版本的組件，都有點問題vue

一、拉快了，就會斷，連不起來（源碼中是畫的圓致使的這個問題，vue-eraser畫的是線去解決不連貫的問題）
二、面積算得不許確
三、結果圖片可能比覆蓋圖片加載得快，頁面會先閃一下結果圖片，而後再由canvas覆蓋（在vue-eraser用到圖片預加載去解決這個問題）

發現有一款jquery版的jquery-eraser，用起來很順滑，因而我就研究了一下它的源碼，把它改爲了vue版的組件而且發佈成npm包了，歡迎提bug。jquery

install

npm install --save vue-eraser

Usage

一、經過import使用git

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>

二、經過script標籤引入github

<!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)	刮刮卡遮罩層的圖片