基于项目需求做个查看原图Gallery组件并上传到NPM（超详细图文）

起因

由于项目需求中，工作人员可以通过APP端拍照上传某些仪器的磨损情况和他们的工作完成度；图片需要在PC端审核查看，图片的数量可能比较多，需要做一个查看原图的功能组件。

思考和敲码过程

思考过程

在我想要百度找一个demo复制粘贴的时候，掘金的沸点就有查看原图的功能，我就直接照着掘金的样式复制粘贴了。

这个功能组件，可能在很多页面都会调用，每个页面都要import，还是有点麻烦的；还是直接做成全局组件，Vue.use()一下就可以用的那种。

敲码过程

项目目录已经有组件的文件夹components，那就在其中新建如图的文件夹和相关文件

gallery.vue

html

html部分就很简单，只有img和关闭的按钮

JS

JavaScript部分也相当简单，接收父组件的img路径就完事了，方法就两个，一个关闭，另一个是放大缩小图片的控制

控制组件显示隐藏，我选择交给父组件

CSS

css部分就稍微多一些，个人习惯用scss多一点

cv代码如下

<template>  
  <div class="gallery">    
    <div class="gallery-content">      
      <img :class="zoomImg===false?'gallery-content-img zoom-in':'gallery-content-img zoom-out'"       
           :src="src"      
           @click="handlezoom" />    
    </div>    
    <div class="gallery-close" @click="closeGallery">      
      <span class="gallery-close-icon">X</span>    
    </div>  
  </div>
</template>
 
<script>
export default {  
  name: 'gallery',  
  props: {    
    src: String  
  },  
  data () {
    return {      
      zoomImg: true    
    }  
  },  
  computed: {  
  },  
  methods: {    
    closeGallery () {      
      this.$emit('closeGallery')    
    },    
    handlezoom () {      
      this.zoomImg = !this.zoomImg    
    }  
  }
}
</script>

<style lang="scss" scoped>
  .gallery {  
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: 9999;  
    width: 100%;  
    height: 100%;  
    background-color: rgba(0, 0, 0, .8);  
    .gallery-content {    
      margin: 0 auto;    
      width: 100%;    
      height: 100%;    
      display: flex;    
      align-items: center;    
      justify-content: center;    
      overflow: auto;    
      .gallery-content-img {      
        cursor: zoom-in;      
        max-width: 100%;      
        max-height: 100%;    
      }  
    }  
    .gallery-close{    
      position: absolute;    
      cursor: pointer;    
      top: 20px;    
      right: 20px;    
      width: 40px;    
      height: 40px;    
      border-radius: 50%;    
      background-color: hsla(0,0%,41.2%,.2);    
      transition: .2s;    
      text-align: center;    
      line-height: 40px;    
      font-size: 18px;    
      color: #ffffff;    
      &:hover {      
        background-color: hsla(0,0%,58.8%,.5);    
      }  
    }
  }
.zoom-in {  
  max-height: inherit !important;  
  cursor: zoom-out !important;
}
</style>

OK，最关键的vue组件完成了，还有就是gallery文件夹下的index.js

index.js

这个js文件就是注册全局组件的关键，作用就是Vue.use()的时候，把gallery组件挂载到全局

cv代码如下

import gallery from './gallery.vue'

gallery.install = function (Vue) {  
  Vue.component(gallery.name, gallery)
}

export default gallery

接下来就要在main.js引入了

import gallery from './components/gallery'

Vue.use(gallery)

 那么现在组件已经可以全局调用了

父组件代码如下，双击图片时候，传入图片路径

<template>  
  <div id="app">    
    <img class="img" v-for="(item, index) in imgSrc" 
      :key="index"    
      :src="item" 
      @dblclick="handleGallery(item)">    
    <gallery v-if="galleryVisable" :src="gallerySrc" @closeGallery='closeGallery'></gallery>  
  </div>
</template>

<script>
export default {  
  name: 'App',  
  components: {  },  
  data () {    
    return {      
      imgSrc: [        
        require('@/assets/logo.png'),        
        require('@/assets/cat.jpg'),        
        require('@/assets/build.jpg')      
      ],      
      gallerySrc: '',      
      galleryVisable: false    
    }  
  },  
  methods: {    
    handleGallery (src) {      
      this.gallerySrc = src      
      this.galleryVisable = true    
    },    
    closeGallery () {      
      this.galleryVisable = false    
    }  
  }
}
</script>

<style>
  .img {  
    margin: 0 24px 0 0;  
    width: 280px;
  }
</style>

测试结果，感觉还不错

文章到这里你已经get到了一个gallery组件的全部内容，可以cv到你的项目去了，顺便给我一个小小的点赞

将组件上传到NPM

参考文章  www.cnblogs.com/max-tlp/p/9…

注册npm账号

这里需要注意一点，记得激活绑定邮箱，不然上传会失败

开发npm组件

我用的是webpack-simple的项目模板

vue init webpack-simple simple-gallery
cd simple-gallery
npm i

把项目精简，在src目录下新建gallery.vue和index.js

gallery.vue和index.js的代码和上面的一样

接着就要修改相应的文件

首先是**.gitignore**，把 /dist 去掉，因为安装模块后，import找的是dist下的js文件

然后是**webpack.config.js**

...省略
const NODE_ENV = process.env.NODE_ENV
module.exports = {  
    entry: NODE_ENV === 'development' ? './src/main.js' : './src/index.js',  
    output: {    
        path: path.resolve(__dirname, './dist'),    
        publicPath: '/dist/',    
        filename: 'gallery.js',    
        library: 'gallery',    
        libraryTarget: 'umd',    
        umdNamedDefine: true  
    },
...省略

最后是**package.json**

"name": "vue-normal-gallery",  // 项目名称  
"description": "A Vue.js project",  
"version": "1.0.16",  // 版本号  
"author": "**********",  // 作者信息  
"license": "MIT",  
"private": false,  // 共享  
"main": "dist/gallery.js", //这里对应webpack.config.js publicPath + filename 

配置到这里基本完成了，运行**npm run build**，打包成功的话，我们敲码的过程算是告一段落了；如果还有一些报错的话，建议看下那篇参考文章，或者百度谷歌一下。

最后我们需要把打包好的项目上传到npm

回想第一步，有没有注册完成并激活你绑定的邮箱，确认无误后在项目的目录运行**npm login**

按照提示登录后，运行**npm publish**

一切成功的话，在你npm主页上就会出现刚刚上传的npm项目咯

一如既往地安装npm模块

npm i vue-normal-gallery -S

安装之后，在项目main.js引入，再Vue.use()

总结

技术总结，gallery组件还有不少代码可以优化，目前是满足了项目的需求了。

项目git地址 gitee.com/woshilwh/my…

(如果想转载文章，请先经过我的同意哦)