vue2实现点击图片预览->发布到npm->use 全流程

事情是这样的。
我们公司项目会有列表是图片的情况，这时候需要点击图片进行放大预览图片，并且由于图片是用户上传的手机截图或者拍照，所以方向也会不一样。

之前我们用的是vivewer.js。一直用的好好的。但是当渲染表格条数从20变成30或者50的的时候，在点击图片预览就变得不好使或者非常非常卡了。

所以再次基础上，想着仿照viewer.js实现一套vue2和vue3的点击图片放大预览的功能

Vue3 + TS 的也写了一版，也上传到了npm上，有需要的同学可以下载使用

npm i vue3-img-preview

功能本身不复杂，实现点击图片之后具体功能有

放大
缩小
左旋转
右旋转
上线翻转
左右翻转
重置

实现思路

让我们先搞个组件，把图片的src通过props传过来
<template>
  <img :src="imgSrc" class="img-com" @click="showPreview"/>
</template>

旋转功能

data() {
    return: {
        defaultRotate = 0;
    }
}
 // 左旋转
handleBtnSpinLeft() {
  const rotate = (this.defaultRotate -= 90);
  this.$set(this.changeStyle, "transform", `rotate(${rotate}deg)`);
},
// 右旋转
handleBtnSpinRight() {
  const rotate = (this.defaultRotate += 90);
  this.$set(this.changeStyle, "transform", `rotate(${rotate}deg)`);
},

提供install方法

import Preview from './view/preview/index'
import PreviewPopup from './view/prveiew-popup/index';
import './static/css/index.css';

const components = [
  Preview,
  PreviewPopup
]

const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}

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

export default {
  install,
  Preview,
  PreviewPopup
}

npm发布

我这边之前注册过npm账号，所以就直接登录，发布即可有两点需要注意

注意自己有没有换过npm源
记得更新版本号

npm login 
输入账号，密码，邮箱
然后
npm publish

具体使用

  import Vue2Preview from 'vue2-img-preview-layer'

  Vue.use(Vue2Preview)

<preview :imgSrc="imgsrc"></preview>

欢迎大家点赞留言

github 地址： github.com/xiangnideye…