简介

在项目开发中，我们或许都习惯了插件的运用，因为这样对我们的好处有如下：

扩展技术能力：通过使用不同的图片翻转等插件，我们将有机会探索和学习新的技术和工具。这些插件通常会提供新的特性和功能，使我们有机会提高自己的技术能力和技术广度。
提高效率：图片翻转等插件可以让我们更快地实现所需的效果，节省时间和精力。这些插件通常提供一些现成的功能和样式，使我们能够快速地应用于自己的项目中，提高开发效率。
促进创造力和设计能力：使用多样化的图片翻转等插件可以激发我们的创造力和设计能力。这些插件提供了各种各样的美观效果和交互式动画，可以帮助我们更好地设计和构建独特而令人印象深刻的用户界面。
学习最佳实践：通过使用不同的插件，我们可以学习到更多关于最佳实践和设计模式。这些插件通常由经验丰富的开发者开发，他们在插件中运用了一些最佳实践和设计原则，通过研究这些插件源码和文档，我们可以借鉴和学习一些更好的编码方法和设计思路。

但我们需要注意的是，尽管插件可以为我们提供一些帮助和便利，但过度依赖插件也可能带来一些问题。我们应该权衡使用插件的利弊，能够理解其工作原理和潜在的问题。此外，我们还应定期评估和审查所使用的插件，并确保它们对项目有价值并符合项目的长期需求。最重要的是，我们应该积极地学习和探索新的技术和工具，以提高自己的技术水平和解决问题的能力。

所以，我们也应该多尝试手动实现一些插件所带来的功能点。

实践

这里就针对一个图片翻转预览功能，做一下自定义实现步骤的笔记。

需求

即展示服务图片，默认显示主图，可左右切换查看图片，首尾不循环，点击图片可放大查看。

UI样式大致如下：

拆解

从UI原型图中，即可知道，图片翻转包含了左右翻转按钮、中间部分则直接定位当前元素高亮的位置。而显示在中间的图片，则要填充整个宽度，并固定高度。

而且左右切换的时候，需要包括滑动动效效果。

实现过程

定义代码布局

html 复制代码

<template>
  <div class="images">
    <!-- 左箭头 -->
    <img
      src="@renderer/assets/square/icon_right2.svg"
      class="bleft"
      @click="previousImage"
    />

    <!-- 图片切换过渡效果 -->
    <transition name="slide">
      <img :key="currentImage" :src="currentImage" alt="当前图片" class="centerImage" />
    </transition>

    <!-- 右箭头 -->
    <img
      src="@renderer/assets/square/icon_right2.svg"
      class="bright"
      @click="nextImage"
    />
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const images = ref([
      "@renderer/assets/image1.jpg",
      "@renderer/assets/image2.jpg",
      "@renderer/assets/image3.jpg"
    ]);

    const currentIndex = ref(0);

    const currentImage = computed(() => {
      return images.value[currentIndex.value];
    });

    function previousImage() {
      currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length;
    }

    function nextImage() {
      currentIndex.value = (currentIndex.value + 1) % images.value.length;
    }

    return {
      currentImage,
      previousImage,
      nextImage
    };
  }
}
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
</style>

在上述代码中，可以看到我们使用了 ref 和 computed 来定义响应式数据。images 是一个保存图片URL的数组，currentIndex 是当前显示图片的索引。

通过计算属性 currentImage，我们根据 currentIndex 来获取当前显示的图片的URL。

previousImage 和 nextImage 函数用于切换上一张和下一张图片，通过更新 currentIndex 的值来实现图片切换。

最后，定义了一个带有过渡效果的 CSS 动画，用于实现图片的滑动效果

注：针对代码中的centerImage，我们需要对图片做完全填充的效果要按照图片的长宽比例展示图片，但又不压缩或变形图片，我们可以使用CSS的object-fit属性。

object-fit属性用于指定元素如何适应其容器的高度和宽度。下面是一些常用的object-fit属性值：

fill：将整个元素填充到容器中，可能会导致图片变形。
contain：将整个元素缩放到容器中，保持图片的原始宽高比，但可能会留有空白区域。
cover：将元素等比例缩放，填满容器，可能会裁剪掉部分图片。
none：保持图片的原始尺寸，不进行任何缩放或适应

所有我们可以选中cover

代码如下：

css 复制代码

centerImage {
    border-radius: 8px;
    height: inherit;
    width: 100%;
    object-fit: cover; /* 保持图片原始比例，可能会留有空白区域 */
  }

Vue3: 自定义一个图片翻转预览功能-(思路鉴赏)

简介

实践

需求

拆解

实现过程

定义代码布局