在学习coderwhy老师的react课程中，coderwhy老师使用react实现了一个图片预览器功能，自己课后也抽时间使用vue完成了这个图片浏览器的功能，现在记录一下这个过程吧！下方是图片浏览器的github地址。

一. 效果图

我们可以把整体拆分成三个模块:

第一部分是头部的关闭按钮，可通过这个关闭整个图片浏览器。
第二部分是中间的图片展示区域，用户可以通过左右两边的切换按钮切换图片，并附带动画效果。
第三部分是底部的图片预览区域，这个区域主要实现的是这个效果：选中的图片需要高亮，并且当处于边缘的图片时，图片不需要滚动，如果是图片位于图片列表的中间区域，图片需自动居中。

二. 创建项目

使用npm init vue@3命令创建一个vue3项目，我们将在这个项目中开发我们的图片浏览器。

npm init vue @3

vur-router，pinia等工具没有用到，所以我在配置的时候就没安装上了。创建好项目之后，我们可以先准备点静态资源，比方说图片浏览器的关闭图标，左右切换的箭头图标。这些资源可以自己找，自己喜欢的就行。我用的是svg的格式，并将它们都封装成为.vue组件来使用,也可以使用img直接嵌入。

arrow-left组件

<template>










  <svg


    viewBox="0 0 18 18"

    role="img"


    aria-hidden="false"


    aria-label="previous"
    focusable="false"


    style="height: 77px; width: 77px; display: block; fill: currentcolor"

  >


    <path


      d="m13.7 16.29a1 1 0 1 1 -1.42 1.41l-8-8a1 1 0 0 1 0-1.41l8-8a1 1 0 1 1 1.42 1.41l-7.29 7.29z"
      fillRule="evenodd"

    ></path>


  </svg>


</template>






<script>


export default {};


</script>





<style></style>

arrow-right组件

<template>










  <svg


    viewBox="0 0 18 18"

    role="img"


    aria-hidden="false"


    aria-label="next"
    focusable="false"


    style="height: 77px; width: 77px; display: block; fill: currentcolor"

  >


    <path


      d="m4.29 1.71a1 1 0 1 1 1.42-1.41l8 8a1 1 0 0 1 0 1.41l-8 8a1 1 0 1 1 -1.42-1.41l7.29-7.29z"
      fillRule="evenodd"

    ></path>


  </svg>


</template>






<script>


export default {};


</script>





<style></style>

close组件

<template>










  <svg


    viewBox="0 0 24 24"
    role="img"


    aria-hidden="false"


    aria-label="关闭"
    focusable="false"


    style="height: 2em; width: 2em; display: block; fill: rgb(255, 255, 255)"
  >


    <path


      d="m23.25 24c-.19 0-.38-.07-.53-.22l-10.72-10.72-10.72 10.72c-.29.29-.77.29-1.06 0s-.29-.77 0-1.06l10.72-10.72-10.72-10.72c-.29-.29-.29-.77 0-1.06s.77-.29 1.06 0l10.72 10.72 10.72-10.72c.29-.29.77-.29 1.06 0s .29.77 0 1.06l-10.72 10.72 10.72 10.72c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22"
      fill-rule="evenodd"
    ></path>


  </svg>


</template>






<script>


export default {};


</script>





<style></style>

将svg封装成一个组件的好处是如果以后有别的地方需要复用到我们的svg组件，但是可能样式不同，那我们只需要通过传递props去修改组件内部的样式就可以啦。

然后准备一下静态图片:

接着在components文件夹中新建一个PicturesBrowser组件，我们的图片预览功能的逻辑就封装在这个组价内部。

三. 图片浏览器的编写

1. 准备一些图片

首先图片浏览器肯定要有图片吧，所以我们得准备一些图片，这些图片可以是像我这样放在本地目录的静态文件，也可以是通过网络请求请求回来的图片，总之就是要有图片啦，不然就测试不了了哈哈。

// 我想要预览的图片 准备了30张
const pictures = [
  "src/assets/img/11.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
];

2. 控制图片浏览器的显示和隐藏

准备一个按钮，点击这个按钮能够让图片浏览器显示出来。我们定义一个isShowBrowser变量，来控制图片浏览器的显示和隐藏。

<template>










  <div>


    <button @click="previewPictures">查看我的图片</button>


    <PicturesBrowser


      :pictures="pictures"


      v-if="isShowBrowser"


    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import PicturesBrowser from "./components/pictures-browser/index.vue";
// 我想要预览的图片
const pictures = [
  "src/assets/img/11.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
  "src/assets/img/01.webp",
  "src/assets/img/02.webp",
  "src/assets/img/03.webp",
  "src/assets/img/04.webp",
  "src/assets/img/05.webp",
  "src/assets/img/06.webp",
  "src/assets/img/07.webp",
  "src/assets/img/08.webp",
  "src/assets/img/09.webp",
  "src/assets/img/10.webp",
];
const isShowBrowser = ref(false);
</script>



<style scoped lang="scss"></style>

现在可以开始编写图片浏览器组件的样式啦，首先这个是全屏的,背景色是灰色并且是固定定位吧啦吧啦…，以下就是这个图片浏览器的基本样式。

.pictures-browser {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #333;
  display: flex;
  flex-direction: column;
}

当然现在通过点击按钮虽然能够将图片浏览器打开，但是还没有能够关闭图片浏览器的方式，接下来通过编写图片浏览器的头部内容就有关闭的方式了。

3.图片浏览器的头部区域

主要的是通过App组件中自定义事件的方式实现关闭图片浏览器的功能。
App.vue

<template>










  <div>


    <button @click="previewPictures">查看我的图片</button>


    <PicturesBrowser


      :pictures="pictures"


      v-if="isShowBrowser"


      @closeBrowser="handleCloseBrowser"

    />

  </div>


</template>





<script setup>


import { ref } from "vue";

import PicturesBrowser from "./components/pictures-browser/index.vue";
// 我想要预览的图片

const pictures = [

  "src/assets/img/11.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

];

const isShowBrowser = ref(false);




// 预览图片

function previewPictures() {

  isShowBrowser.value = true;

}

// 关闭预览图片

function handleCloseBrowser() {

  isShowBrowser.value = false;

}

</script>




<style scoped lang="scss">

</style>

PicturesBrowser

<template>










  <div class="pictures-browser">


    <!-- 图片浏览器分为三个部分 上中下 -->


    <div class="top">


      <div class="close-btn" @click="handleCloseBrowser">


        <Close></Close>


      </div>


    </div>


  </div>


</template>





<script setup>


import Close from "../../assets/svg/close.vue";
// 定一个自定义事件名称
const $emit = defineEmits(["closeBrowser"]);




// 接收外部传入的图片
const props = defineProps({
  pictures: {
    type: Array,
    default: [],
  },
});


// 隐藏掉图片浏览器
function handleCloseBrowser() {
  // 发出一个关闭事件，通知app组件关闭掉图片浏览器
  $emit("closeBrowser");
}
</script>



<style scoped lang="scss">
.pictures-browser {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #333;
  display: flex;
  flex-direction: column;
  /* 顶部区域 关闭按钮 */
  .top {
    position: relative;
    width: 100%;
    height: 80px;
    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      color: red;
    }
  }
}
</style>

总结一下，就是通过一个自定义事件，当点击close按钮时发出一个事件，通知App组件去关闭掉这个浏览器。

3. 图片浏览器的中部区域

中部区域就是图片的展示区域，由中间的图片和两个指示器组成。设置一个图片的索引currentIndex，可以通过这个索引来确定我们浏览的是哪张图片，currentIndex默认值默认是0，也就是第一张图片。点击右边的指示器是下一张图片，点击左边的指示器就是上一张图片，我们通过修改currentIndex就行啦。下面是中部区域的结构样式和部分逻辑代码。

<template>










  <div class="pictures-browser">


    <!-- 图片浏览器分为三个部分 上中下 -->


    <div class="top">


      <div class="close-btn" @click="handleCloseBrowser">


        <Close></Close>


      </div>


    </div>


    <div class="center">

      <div class="controls">

        <div class="prev" @click="handlePrev">

          <ArrowLeft></ArrowLeft>

        </div>

        <div class="next" @click="handleNext">

          <ArrowRight></ArrowRight>

        </div>

      </div>

      <div class="picture">

        <img :src="props.pictures[currentIndex]"  :key="currentIndex" />
      </div>

    </div>

  </div>
</template>


<script setup>
import Close from "../../assets/svg/close.vue";
import ArrowLeft from "../../assets/svg/arrow-left.vue";
import ArrowRight from "../../assets/svg/arrow-right.vue";
// 定一个自定义事件名称
const $emit = defineEmits(["closeBrowser"]);



// 接收外部传入的图片
const props = defineProps({
  pictures: {
    type: Array,
    default: [],
  },
});

const currentIndex = ref(0);


// 隐藏掉图片浏览器
function handleCloseBrowser() {
  // 发出一个关闭事件，通知app组件关闭掉图片浏览器
  $emit("closeBrowser");
}

// 切换上一张图片
function handlePrev() {
  currentIndex.value = currentIndex.value - 1;
  // 如果左边越界了，就直接跳到最后一张图片
  if (currentIndex.value < 0) {
    currentIndex.value = props.pictures.length - 1;
  }
}
// 切换下一张图片
function handleNext() {
  currentIndex.value = currentIndex.value + 1;
  // 如果右边越界了，就直接跳到第一张图片
  if (currentIndex.value > props.pictures.length - 1) {
    currentIndex.value = 0;
  }
}
</script>

<style scoped lang="scss">
.pictures-browser {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #333;
  display: flex;
  flex-direction: column;
  /* 顶部区域 关闭按钮 */
  .top {
    position: relative;
    width: 100%;
    height: 80px;
    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      color: red;
    }
  }

  /* 中间区域 展示图片 */
  .center {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    color: #fff;
    .controls {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .prev,
      .next {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
      }
    }
    .picture {
      position: relative;
      height: 100%;
      width: 100%;
      max-width: 105vh;
      overflow: hidden;
      img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        height: 100%;
        user-select: none;
        /* object-fit: cover; */
      }
    }
  }
}
</style>

需要注意的是，我们还得去判断一下左右边界的问题，我这里写的逻辑是这样的，如果是你的currentIndex<0的话就滚动到最后一张，如果是currentInde>图片列表的长度,那么就滚动到第一张图片。
现在基本的切换的效果就有啦。

效果图:

3.1 切换图片的动画效果实现

切换时候的动画效果，我使用的是vue的内置组件。我这里要设置的切换的动画效果是图片如果是下一张的话那么图片从右边过来，并且上一张图片是通过设置透明度慢慢消失。，如果是点击上一张的话则进来的方向相反。我们可以给img元素包裹一个组件来对它进行动画，当然这个img得绑定一个key，这样才能捕获到这个元素的改变。

     <Transition :name="isNext ? 'pic' : 'pic2'" mode="in-out">
          <img :src="props.pictures[currentIndex]"  :key="currentIndex" />
      </Transition>

我们思考下，因为点击不同的方向按钮就要做不同的动画，所以我们得先判断点击的是上一个按钮还是下一个按钮。这里我是通过一个isNext变量去判断，通过这个去给transition绑定不同的动画。左右的动画样式如下，.pic代表右边的动画，.pic2代表左边的动画：

 .pic-enter-from {
  opacity: 0;
  transform: translateX(100%);
}
.pic-enter-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}



.pic-leave-active {
  transition: opacity 0.2s ease;
}

.pic-enter-to,
.pic-leave-from {
  opacity: 1;
  transform: translateX(0);
}



.pic-leave-to {
  opacity: 0;
  transform: translateX(0);
}

.pic2-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}
.pic2-enter-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}



.pic2-leave-active {
  transition: opacity 0.2s ease;
}

.pic2-enter-to,
.pic2-leave-from {
  opacity: 1;
  transform: translateX(0);
}


.pic2-leave-to {
  opacity: 0;
  transform: translateX(0);
}

效果图如下：

4. 图片浏览器底部区域

底部区域的滚动效果是这样的，如果选择的是边缘的图片的话，就不需要滚动到中间区域。如果图片是处于整个图片列表的中间区域的话，那么选择的图片是需要滚动到中间区域的。
我们可以先不需要考虑边缘的地方，我们先考虑，一个元素，它要怎么才能滚动到另一个元素的中间位置呢？我们可以画一张图来看看。

假如我们想把4这个元素居中，看看效果

如果我们需要将元素滚动到中间的话，我们可以给它一个偏移量就行。那么这个偏移量是怎么计算到的呢，如图所示，我们可以通过(元素的宽度/2) + 元素离自己最近定位元素的偏移量 – 父容器元素宽度的一半，就能够算出来。那么到达边缘的时候我们也能够去判断啦，如下图所示有两种边缘情况：
第一种边缘情况:

第二种边缘情况:

这两种情况都有一个特点，就是左右两边都有间隔，那如果我们不需要这些间隔，又该如何判断呢？

第一种情况，只要我们刚刚算的那个公式（(元素的宽度/2) + 元素离自己最近定位元素的偏移量 – 父容器元素宽度的一半）是一个负值，那它就会产生这种左边有空间的情况。
第二种情况，其实就是我们刚刚算的公式(元素的宽度/2) + 元素离自己最近定位元素的偏移量 – 父容器元素宽度的一半）大于它们的最大滚动宽度，那它就会产生这种右边有空间的情况。那它们的最大滚动宽度怎么算呢，最大滚动宽度等于(父元素的总宽度 – 父元素的可视宽度)。
基于上述两个分析，我们可以得出两个判断条件，第一个就是滚动距离小于0时，我们就得设置它的滚动距离为0。第二个就是滚动距离大于最大滚动宽度时，我们得将他的滚动距离设置成最大滚动宽度。这两种判断是为了到达边缘的时候元素就不需要滚动到中间了。

分析好上述原理之后，我们可以写一下底部的功能啦。因为这个功能感觉还是挺普遍的，可能到时候别的地方也有可能用到，我们可以将他们封装成组件。这个组件需要一个索引index，来判断当前元素的滚动距离。

<template>










  <div class="indicator">

    <div class="content" ref="contentRef">

      <slot></slot>

    </div>

  </div>

</template>




<script setup>

import { onMounted, onUpdated, ref } from "vue";

const props = defineProps({

  index: {

    type: Number,

    default: 0,

  },

});

const contentRef = ref();




onMounted(() => {

  watchIndexChange();

});





onUpdated(() => {

  watchIndexChange();

});



function watchIndexChange() {

  // 父元素的可视宽度

  const parentNodeWidth = contentRef.value.clientWidth;

  //   父元素的总宽度

  const parentNodeScrollWidth = contentRef.value.scrollWidth;

  //   子元素的总宽度
  const childrenNodeWidth = contentRef.value.children[props.index].clientWidth;

  //   子元素偏移自己最近定位的父元素的偏移量

  const childrenNodeOffsetLeft =

    contentRef.value.children[props.index].offsetLeft;

  //   滚动宽度

  let rollingWidth =

    childrenNodeOffsetLeft + childrenNodeWidth * 0.5 - parentNodeWidth * 0.5;

  // 如果滚动宽度<0，则将它设置为0，也就是让它到0的时候不再滚动。

  if (rollingWidth < 0) {

    rollingWidth = 0;

  }

  // 如果滚动宽度<最大可滚动宽度，则将它设置为最大可滚动宽度，也就是让它到最大可滚动宽度的时候不再滚动。

  if (rollingWidth > parentNodeScrollWidth - parentNodeWidth) {

    rollingWidth = parentNodeScrollWidth - parentNodeWidth;

  }

  //   使用transform整个元素，并设置过渡效果

  contentRef.value.style.transform = `translate(${-rollingWidth}px)`;

}

</script>



<style lang="scss" scoped>

.indicator {

  overflow: hidden;

  .content {

    position: relative;

    display: flex;

    align-items: center;

    transition: transform 300ms ease;

    > * {

      flex-shrink: 0;

    }

  }

}

</style>

parentNodeWidth: 父元素的可视宽度
parentNodeScrollWidth: 父元素的总宽度
childrenNodeWidth: 子元素的总宽度
childrenNodeOffsetLeft：子元素偏移自己最近定位的父元素的偏移量
rollingWidth：滚动宽度

另外，这里我们点击底部图片切换时，也要判断一下是否是点击下一个或者是下一个的状态，这里主要是为了设置一个正确的图片切换动画。

5. 注意点

当我们打开图片浏览器的时候，我们需要隐藏掉窗口的滚动条。但是可能在开发的时候我们的页面是存在滚动条的，所以当我们的滚动条被创建和销毁的时候，我们得去判断一下。

onMounted(() => {
  window.document.body.style.overflow = "hidden";
});
onBeforeUnmount(() => {
  window.document.body.style.overflow = "auto";
});

这也是为什么我控制图片浏览器的显示和隐藏的时候选择的是v-if，因为如果我使用v-show的话是比较麻烦捕获不到它的onMounted和onBeforeUnmount的过程的。

6. 完整代码

App.vue文件

<template>










  <div>


    <button @click="previewPictures">查看我的图片</button>


    <PicturesBrowser


      :pictures="pictures"


      v-if="isShowBrowser"


      @closeBrowser="handleCloseBrowser"

    />

  </div>


</template>





<script setup>


import { ref } from "vue";

import PicturesBrowser from "./components/pictures-browser/index2.vue";
// 我想要预览的图片

const pictures = [

  "src/assets/img/11.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

  "src/assets/img/01.webp",

  "src/assets/img/02.webp",

  "src/assets/img/03.webp",

  "src/assets/img/04.webp",

  "src/assets/img/05.webp",

  "src/assets/img/06.webp",

  "src/assets/img/07.webp",

  "src/assets/img/08.webp",

  "src/assets/img/09.webp",

  "src/assets/img/10.webp",

];

const isShowBrowser = ref(false);




// 预览图片

function previewPictures() {

  isShowBrowser.value = true;

}

// 关闭预览图片

function handleCloseBrowser() {

  isShowBrowser.value = false;

}

</script>




<style scoped lang="scss">
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

pictures-browser文件

<template>










  <div class="pictures-browser">


    <!-- 图片浏览器分为三个部分 上中下 -->


    <div class="top">


      <div class="close-btn" @click="handleCloseBrowser">


        <Close></Close>


      </div>


    </div>


    <div class="center">

      <div class="controls">

        <div class="prev" @click="handlePrev">

          <ArrowLeft></ArrowLeft>

        </div>

        <div class="next" @click="handleNext">

          <ArrowRight></ArrowRight>

        </div>

      </div>

      <div class="picture">

       
      </div>

    </div>

    <div class="bottom">
      <div class="preview">
        <div class="desc">
          <div class="left">
            共{{ currentIndex + 1 }} / {{ props.pictures.length }}, 第{{
              currentIndex + 1
            }}张图片
          </div>
          <div class="right" @click="changeIsShowPictureList">
            {{ isShowPictureList ? "隐藏" : "显示" }}图片列表
          </div>
        </div>
        <div
          class="preview-list"
          :style="{ height: isShowPictureList ? '67px' : '0px' }"
        >
          <Indicator :index="currentIndex">
            <div
              class="preview-item"
              v-for="(item, index) in pictures"
              :key="index"
              :class="{ active: currentIndex === index }"
              @click="setCurrentIndex(index)"
            >
              <img :src="item"  />
            </div>
          </Indicator>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
import Close from "../../assets/svg/close.vue";
import ArrowLeft from "../../assets/svg/arrow-left.vue";
import ArrowRight from "../../assets/svg/arrow-right.vue";
import Indicator from "../../components/indicator/index.vue";

onMounted(() => {
  window.document.body.style.overflow = "hidden";
});
onBeforeUnmount(() => {
  window.document.body.style.overflow = "auto";
});
// 定一个自定义事件名称
let $emit = defineEmits(["closeBrowser"]);



const props = defineProps({
  pictures: {
    type: Array,
    default: [],
  },
});

const isNext = ref(false);
const currentIndex = ref(0);
const isShowPictureList = ref(true);

// 隐藏掉图片浏览器
function handleCloseBrowser() {
  $emit("closeBrowser");
}

// 切换上一张图片
function handlePrev() {
  isNext.value = false;
  currentIndex.value = currentIndex.value - 1;
  // 如果左边越界了，就直接跳到最后一张图片
  if (currentIndex.value < 0) {
    currentIndex.value = props.pictures.length - 1;
  }
}
// 切换下一张图片
function handleNext() {
  isNext.value = true;
  currentIndex.value = currentIndex.value + 1;
  // 如果右边越界了，就直接跳到第一张图片
  if (currentIndex.value > props.pictures.length - 1) {
    currentIndex.value = 0;
  }
}
// 是否展示图片预览列表
function changeIsShowPictureList() {
  isShowPictureList.value = !isShowPictureList.value;
}

// 切换index
function setCurrentIndex(index) {
  // 如果切换的索引比当前的索引大，那么我们将isNext状态设置为true，设置下一张图片需要用到的动画
  if (index > currentIndex.value) {
    isNext.value = true;
  }
  // 如果切换的索引比当前的索引小，那么我们将isNext状态设置为false，设置上一张图片需要用到的动画
  if (index < currentIndex.value) {
    isNext.value = false;
  }
  currentIndex.value = index;
}
</script>

<style scoped lang="scss">
.pic-enter-from {
  opacity: 0;
  transform: translateX(100%);
}
.pic-enter-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pic-leave-active {
  transition: opacity 0.2s ease;
}

.pic-enter-to,
.pic-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.pic-leave-to {
  opacity: 0;
  transform: translateX(0);
}

.pic2-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}
.pic2-enter-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pic2-leave-active {
  transition: opacity 0.2s ease;
}

.pic2-enter-to,
.pic2-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.pic2-leave-to {
  opacity: 0;
  transform: translateX(0);
}
.pictures-browser {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #333;
  display: flex;
  flex-direction: column;
  /* 顶部区域 关闭按钮 */
  .top {
    position: relative;
    width: 100%;
    height: 80px;
    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      color: red;
    }
  }

  /* 中间区域 展示图片 */
  .center {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    color: #fff;
    .controls {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .prev,
      .next {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
      }
    }
    .picture {
      position: relative;
      height: 100%;
      width: 100%;
      max-width: 105vh;
      overflow: hidden;
      img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        height: 100%;
        user-select: none;
        /* object-fit: cover; */
      }
    }
  }

  /* 底部图片 指示器 */
  .bottom {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    color: #fff;
    height: 100px;
    .preview {
      position: absolute;
      bottom: 10px;
      max-width: 105vh;
      .desc {
        display: flex;
        justify-content: space-between;
        .right {
          cursor: pointer;
        }
      }
      .preview-list {
        margin-top: 3px;
        overflow: hidden;
        transition: height 300ms ease;
        .preview-item {
          margin-right: 5px;
          cursor: pointer;
          img {
            height: 67px;
            opacity: 0.5;
          }
          &.active {
            img {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
</style>

indicator文件

<template>










  <div class="indicator">

    <div class="content" ref="contentRef">

      <slot></slot>

    </div>

  </div>

</template>




<script setup>

import { onMounted, onUpdated, ref } from "vue";

const props = defineProps({

  index: {

    type: Number,

    default: 0,

  },

});

const contentRef = ref();




onMounted(() => {

  watchIndexChange();

});





onUpdated(() => {

  watchIndexChange();

});



function watchIndexChange() {

  // 父元素的可视宽度

  const parentNodeWidth = contentRef.value.clientWidth;

  //   父元素的总宽度

  const parentNodeScrollWidth = contentRef.value.scrollWidth;

  //   子元素的宽度
  const childrenNodeWidth = contentRef.value.children[props.index].clientWidth;

  //   子元素偏移自己最近定位的父元素的偏移量

  const childrenNodeOffsetLeft =

    contentRef.value.children[props.index].offsetLeft;

  //   滚动宽度

  let rollingWidth =

    childrenNodeOffsetLeft + childrenNodeWidth * 0.5 - parentNodeWidth * 0.5;

  // 如果滚动宽度<0，则将它设置为0，也就是让它到0的时候不再滚动。

  if (rollingWidth < 0) {

    rollingWidth = 0;

  }

  // 如果滚动宽度<最大可滚动宽度，则将它设置为最大可滚动宽度，也就是让它到最大可滚动宽度的时候不再滚动。

  if (rollingWidth > parentNodeScrollWidth - parentNodeWidth) {

    rollingWidth = parentNodeScrollWidth - parentNodeWidth;

  }

  //   使用transform整个元素，并设置过渡效果

  contentRef.value.style.transform = `translate(${-rollingWidth}px)`;

}

</script>



<style lang="scss" scoped>

.indicator {

  overflow: hidden;

  .content {

    position: relative;

    display: flex;

    align-items: center;

    transition: transform 300ms ease;

    > * {

      flex-shrink: 0;

    }

  }

}

</style>