基于刮刮卡Vue组件发布一个NPM包

时间 2019-11-07

标签基于刮刮卡 vue 组件发布一个 npm 繁體版

原文原文链接

1、前言

项目中须要实现一个刮刮卡的模块，项目结束后沉淀项目时恰好能够把刮刮卡模块封装好，在下次新的项目中要用到时，能够更好的提升项目的效率，固然也更好地提供给其余小伙伴使用。html

源码地址：github.com/ZENGzoe/vue… npm包地址：www.npmjs.com/package/vue…vue

刮刮卡组件的效果以下：node

2、刮刮卡vue组件的实现

刮刮卡功能的实现能够分三步：webpack

1. 工做流的搭建

工做流使用的是vue-cli的webpack-simple模版，可以知足组件基本的编译要求：git

vue init webpack-simple vue-scratch-card
复制代码

执行后，根据组件录入package.json的信息。github

Use sass? (y/N) y
复制代码

在项目这里我选择的是use sass。web

在src目录下建立packages目录，用于存放全部的子组件，在本组件中只有一个刮刮卡组件，所以在packages里新建scratch-card目录用于存放咱们的刮刮卡组件。若是还有其余子组件，能够继续在packages添加子组件，最终目录以下：vue-cli

.
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── main.js             //组合全部子组件，封装组件
│   ├── main.js             //入口文件
│   └── packages            //用于存放全部的子组件
│       └── scratch-card    //用于存放刮刮卡组件
│           └── scratch-card.vue   //刮刮卡组件代码
└── webpack.config.js
复制代码

为了支持组件可使用标签<script>的方式引入，封装成组件的打包文件只须要统一打包为js：npm

所以须要修改咱们的配置文件webpack.config.js：json

//webpack.config.js
 output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'vue-scratch-card.js',
    library : 'vue-scratch-card',  //设置的是使用require时的模块名
    libraryTarget : 'umd',    //libraryTarget能够设置不一样的umd代码，能够是commonjs标准、amd标准，也能够生成经过script标签引入的
    umdNamedDefine : true,    //会对UMD的构建过程当中的amd模块进行命名，不然就用匿名的define
},
复制代码

同时，为了保留打包的dist目录，须要在.gitignore中去掉dist目录。

2.canvas实现刮刮卡

刮刮卡主要是经过Canvas实现，通常刮刮卡是和抽奖结合，那么咱们的DOM应该要包含能够显示抽奖结果的DOM，结构以下：

//scratch-card.vue
<template>
    <div :id='elementId' class='scratchCard'>
        <div class="result" v-show='showLucky'>
            <slot name='result'></slot>
            <img :src="resultImg" alt="" class="pic" />
        </div>
        <canvas id='scratchCanvas'></canvas>
    </div>
</template>
复制代码

其中，添加了一个<slot>插槽，为了能够在调用这个组件时，定制抽奖结果的DOM。

接下来是实现刮刮卡的逻辑部分。

大体js结构以下：

//scratch-card.vue
    export default {
        name : 'vueScratchCard',
        data(){
            return {
                supportTouch : false,       //是否支持touch事件
                events : [],                //touch事件 or mouse事件合集
                startMoveHandler : null,     //touchstart or mousedown 事件
                moveHandler : null,         //touchmove or mousemove 事件
                endMoveHandler : null,      //touchend or mouseend 事件
                showLucky : false,          //显示隐藏抽奖结果
                firstTouch : true,          //是否第一次touchstart or mousedown
            }
        },
        props : {
            elementId : {   //组件最外层DOM的id属性
                type : String,
                default : 'scratch',
            },
            moveRadius : {  //刮刮范围
                type : Number,
                default : 15
            },
            ratio : {   //要求刮掉的面积占比，达到这个占比后，将会自动把其他区域清除
                type : Number,
                default : 0.3
            },
            startCallback : {   //第一次刮回调函数
                type : Function,
                default : function(){
                }
            },
            clearCallback : {   //达到ratio占比后的回调函数
                type : Function ,
                default : function(){
                }
            },
            coverColor : {  //刮刮卡遮罩颜色
                type : String,
                default : '#C5C5C5'
            },
            coverImg : {    //刮刮卡遮罩图片
                type : String,
            },
            resultImg : {       //中奖的图
                type : String,
                default : 'https://raw.githubusercontent.com/ZENGzoe/imagesCollection/master/2018/default.jpg'
            }
        },
        mounted : function(){
        },
        methods : {
        }
    }
复制代码

开始编写逻辑以前，须要考虑组件可配置属性，添加到props中，让组件的使用可以更加灵活。

在组件挂载到实例中时，开始初始化组件，绘制Canvas。

//scratch-card.vue
...

mounted : function(){
    this.$nextTick(() => {
        this.init();
    })
},
methods : function(){
    init : function(){
        if(!this.isSupportCanvas){
            alert('当前浏览器不支持canvas');
            return;
        }
        const canvasWrap = document.getElementById(this.elementId);
        this.canvas =canvasWrap.querySelector('#scratchCanvas');
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = canvasWrap.clientWidth;
        this.canvas.height = canvasWrap.clientHeight;

        this.createCanvasStyle();
    },
    createCanvasStyle : function(){
        var _this = this;
        //当传入coverImg时，优先使用图片，不然使用颜色做为刮刮卡遮罩
        if(this.coverImg){
            var coverImg = new Image();
            coverImg.src = this.coverImg;
            coverImg.onload = function(){
                _this.ctx.drawImage(coverImg , 0 , 0 , _this.canvas.width , _this.canvas.height);
            }
        }else{
            _this.ctx.fillStyle = _this.coverColor;
            _this.ctx.fillRect(0,0,_this.canvas.width , _this.canvas.height);
        }
    },
}
...
复制代码

当须要向Canvas添加跨域图片时，须要将图片转为base64。

PC页面绑定的事件为mousesdown、mousemove、mouseup，移动端页面中绑定的事件为touchstart、touchmove、touchend，所以须要区分在不一样端的事件绑定。

//scratch-card.vue
...
init : function(){
    ...
    this.bindEvent();
},
bindEvent : function(){
    if('ontouchstart' in window) this.supportTouch = true;
    this.events = this.supportTouch ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];
    this.addEvent();
},
...
复制代码

为了减小篇幅，绑定事件addEvent的具体实现，能够查看源码。

刮刮卡擦拭的效果由Canvas的globalCompositeOperation属性实现，设置globalCompositeOperation = "destination-out"让手指或鼠标与Canvas画布重合区域不可见，就可让刮刮卡的擦拭效果。在touchmove和mousemove绑定的事件中添加擦拭效果。实现以下：

moveEventHandler : function(e){
    e.preventDefault();
    
    e = this.supportTouch ? e.touches[0] : e;

    const canvasPos = this.canvas.getBoundingClientRect(),
          scrollT = document.documentElement.scrollTop || document.body.scrollTop,
          scrollL = document.documentElement.scrollLeft || document.body.scrollLeft,
           //获取鼠标或手指在canvas画布的位置
          mouseX = e.pageX - canvasPos.left - scrollL, 
          mouseY = e.pageY - canvasPos.top - scrollT;

    this.ctx.beginPath();
    this.ctx.fillStyle = '#FFFFFF';
    this.ctx.globalCompositeOperation = "destination-out";
    this.ctx.arc(mouseX, mouseY, this.moveRadius, 0, 2 * Math.PI);
    this.ctx.fill();
},
复制代码

每次手指或鼠标离开时，计算擦拭区域，当擦去的区域大于画布的约定的百分比时，清除整个Canvas画布。擦拭区域的计算至关于计算画布上的像素点是否还有数据，经过getImageData方法可获取画布的像素点。具体实现以下：

caleArea : function(){
    let pixels = this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),
        transPixels = [];
    
    pixels.data.map((item , i) => {
        const pixel = pixels.data[i+3];
        if(pixel === 0){
            transPixels.push(pixel);
        }
    })

    if(transPixels.length / pixels.data.length > this.ratio){
        this.ctx.clearRect(0,0,this.canvas.width , this.canvas.height);
        this.canvas.removeEventListener(this.events[0],this.startMoveHandler);
        this.canvas.removeEventListener(this.events[1] , this.moveHandler , false);
        document.removeEventListener(this.events[2] , this.endMoveHandler , false);

        this.clearCallback();
    }
}
复制代码

每次手指或鼠标离开时，为了避免污染其余区域的事件和占用内容，要清除绑定的事件。

那么到这里就实现了刮刮卡的全部逻辑，接下来就是要将刮刮卡组件封装成插件。

3.封装成插件

将VUE组件封装成插件，就应该有一个公开的install方法，这样才能够经过Vue.use()调用插件。详细介绍能够看VUE的官方文档。

在scratch-card目录中新建index.js，用来封装scratchCard的install方法：

//scratch-card/index.js
import vueScratchCard from './scratch-card'

vueScratchCard.install = Vue => Vue.component(vueScratchCard.name , vueScratchCard);

if(typeof window !== 'undefined' && window.Vue){
    window.Vue.use(vueScratchCard);
}

export default vueScratchCard;
复制代码

到这里咱们封装好了咱们的子组件刮刮卡，若是有其余子组件，能够继续往packages目录中添加，最后在src目录下新建index.js，组合全部的子组件。

//src/index.js

import VueScratchCard from './packages/scratch-card/index.js';

const install = function(Vue , opts = {}){
    Vue.component(VueScratchCard.name , VueScratchCard);
}

//支持使用标签<script>的方式引入
if(typeof window !== 'undefined' && window.Vue){
    install(window.Vue);
}

export default {
    install ,
    VueScratchCard
}
复制代码

这样就完成了咱们的组件啦～～

3、发布到npm

发布到npm前，须要修改package.json，设置"private":true，不然npm会拒绝发布私有包。除此以外，还须要添加入口文件，"main":"dist/vue-scratch-card.js"，能够在当require或import包时加载模块。

//package.json
  "private": false,
  "main" : "dist/vue-scratch-card.js",
复制代码

npm发布流程以下：

1.在npm注册帐号

2.登录npm，须要将镜像地址改成npm

npm login
复制代码

3.添加用户信息，输入帐号密码

npm adduser
复制代码

4.发布

npm publish 
复制代码

发布成功后，就能够在npm搜索到发布的包。

4、安装使用包

以后咱们就能够在直接安装使用了～～

安装：

npm install vue-scratch-card0 -S 
复制代码

使用：

1.经过import使用

import ScratchCard from 'vue-scratch-card0'
Vue.use(ScratchCard)

<vue-scratch-card 
    element-id='scratchWrap'
    :ratio=0.5
    :move-radius=50
/>

复制代码

2.经过标签<script>引用

<vue-scratch-card 
    element-id='scratchWrap'
    :ratio=0.5
    :move-radius=50
    :start-callback=startCallback
    :clear-callback=clearCallback
    cover-color='#caa'
  />

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
      el : '#app',
      data () {
        return {

        }
      },
      methods : {
        startCallback(){
          console.log('抽奖成功！')
        },
        clearCallback(){
          console.log('清除完毕！')
        }
      }
    })
</script>
复制代码

5、总结

发布npm包时，一直提示Package name too similar to existing packages，可是在npm官网中，又没有查到命名相同的包，这个时候就不停的换package.json中的name，最后终于发布成功了，太不容易了～_～