js点击图片缩放

前言

最近因为项原因，需要图片预览功能，本来想使用组件库的图片预览组件的，后来因为项目ui组件库版本过低，无法使用组件库的预览功能，只能手搓一个简单的预览功能。废话不多说，直接上码。

代码：

<template>
  <div class="position">
    <div class="smallImg" @click="bigImg(imgs)">
      <img :src="imgs" />
    </div>
    <div id="previewImg">
      <img src="" @click="closeImg" />
    </div>
  </div>
</template>

<script>
import $ from 'jquery' 
export default {
  data () {
    return {
      imgs: require('./123.jpg')
    }
  },
  methods: {
    // 列表图片放大缩小
    closeImg () {
      $("#previewImg img").attr('src', "");
      $("#previewImg").hide();
    },

    bigImg (imgs) {
      let image = new Image(); //创建一个image对象
      let path = imgs;
      image.src = path;   //新创建的image添加src
      $("#previewImg img").attr('src', path);
      $("#previewImg").show();
    }

  }
}
</script>

<style scoped>
.position {
  width: calc(100vw);
  height: calc(100vh);
  position: relative;
  top: 0px;
}
.smallImg {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.smallImg img {
  height: 100%;
  object-fit: contain;
}

#previewImg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
}

#previewImg img {
  object-fit: contain;
  vertical-align: middle;
  max-width: 80vw !important;
  max-height: 80vh !important;
}
</style>

效果如下：