实现点击小图片放大效果

效果如下：

 从当前点击的位置开始放大图片的效果，还有视频的播放

实现代码如下

<template>
  <div class="wrap">
    <img class="img" ref="index1" :src="img" alt="" @click="showBig" />
    <img class="img" ref="index2" :src="toux" alt="" @click="showBig" />
    <video class="img" width="100" height="100" @click="showBig">
      <source src="../assets/flower.webm" type="video/webm" />
    </video>
  </div>
  <div ref="mask" class="dialog" v-show="show" @click="close"></div>
</template>
<script>
import img from "../assets/dog.png";
import toux from "../assets/1.jpg";
export default {
  data() {
    return { img, toux, show: false };
  },
  methods: {
    showBig(e) {
      const type = e.target.localName;
      this.originEl = e.target;
      this.cloneEl = this.originEl.cloneNode(true);
      const { top, left } = this.originEl.getBoundingClientRect();
      this.cloneEl.style.left = left + "px";
      this.cloneEl.style.top = top + "px";
      this.$refs.mask.appendChild(this.cloneEl);
      if (type == "video") {
        this.cloneEl.controls = true;
        this.cloneEl.loop = true;
        this.cloneEl.play();
      }
      this.show = true;
      setTimeout(() => {
        // 动态设置图片的居中
        this.cloneEl.style.top = "50%";
        this.cloneEl.style.left = "50%";
        this.cloneEl.style.transform = "translate(-50%,-50%) scale(1)";
        this.cloneEl.style.transition = "all 0.5s ease-in-out";
      }, 0);
    },
    close() {
      this.show = false;
      this.$refs.mask.removeChild(this.cloneEl);
    }
  }
};
</script>
<style scoped lang="less">
.wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  img {
    width: 100px;
    height: 100px;
  }
}
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
  box-sizing: border-box;
  img,
  video {
    position: absolute;
    transform: scale(0.1);
    transform-origin: left top;
    transition: all 1s ease-in-out;
    width: calc(100% - 40px);
    object-fit: contain;
  }
}
</style>