图片预览

<script setup lang="ts">
import { ref, nextTick } from 'vue';
const show = ref(false);
const URL = ref('');
const previewImg = ref<HTMLImageElement | null>(null);
const preview = (e: Event) => {
  const el = e.target as HTMLImageElement;
  if (el.tagName != 'IMG') return;
  show.value = true;
  const { left, top } = el.getBoundingClientRect();
  nextTick(() => {
    const previewImgStyle = previewImg.value!!.getBoundingClientRect();
    console.log(previewImgStyle, 'previewImgStyle');
    const style = {
      left: left - previewImgStyle.left,
      top: top - previewImgStyle.top,
    };

    URL.value = el.src;
    const keyframes = [
      {
        transform: `translate(${style.left}px, ${style.top}px) `,
      },
      { transform: `translate(0px, 0px) rotate(0)` },
    ];
    previewImg.value?.animate(keyframes, {
      duration: 1000,
      easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
    });
  });
};
</script>

<template>
  <div class="box" @click="preview">
    <img src="../../assets/images/wallhaven-28mv3g.jpg" alt="" />
    <img src="../../assets/images/wallhaven-28w5og.jpg" alt="" />
    <img src="../../assets/images/wallhaven-k75m6q_3840x2160.png" alt="" />
    <img src="../../assets/images/wallhaven-l3l8vq.jpg" alt="" />
    <img src="../../assets/images/wallhaven-pkgkkp.png" alt="" />
    <img src="../../assets/images/wallhaven-v9vv3p.png1_.jpg" alt="" />
    <img src="../../assets/images/wallhaven-v9vv3p.png_.jpg" alt="" />
    <!-- 遮罩层 -->
    <div class="overlay" v-show="show" @click="show = false">
      <img :src="URL" alt="" ref="previewImg" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  img {
    height: 400px;
    width: 400px;
    vertical-align: middle;
    margin: 5px;
    object-fit: contain;
  }
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    img {
    }
  }
}
</style>