基于Vue3自定义实现图片翻转预览功能
作者：糖墨夕
简介
在项目开发中，我们或许都习惯了插件的运用，因为这样对我们的好处有如下：
- 扩展技术能力：通过使用不同的图片翻转等插件，我们将有机会探索和学习新的技术和工具。这些插件通常会提供新的特性和功能，使我们有机会提高自己的技术能力和技术广度。
- 提高效率：图片翻转等插件可以让我们更快地实现所需的效果，节省时间和精力。这些插件通常提供一些现成的功能和样式，使我们能够快速地应用于自己的项目中，提高开发效率。
- 促进创造力和设计能力：使用多样化的图片翻转等插件可以激发我们的创造力和设计能力。这些插件提供了各种各样的美观效果和交互式动画，可以帮助我们更好地设计和构建独特而令人印象深刻的用户界面。
- 学习最佳实践：通过使用不同的插件，我们可以学习到更多关于最佳实践和设计模式。这些插件通常由经验丰富的开发者开发，他们在插件中运用了一些最佳实践和设计原则，通过研究这些插件源码和文档，我们可以借鉴和学习一些更好的编码方法和设计思路。
但我们需要注意的是，尽管插件可以为我们提供一些帮助和便利，但过度依赖插件也可能带来一些问题。我们应该权衡使用插件的利弊，能够理解其工作原理和潜在的问题。此外，我们还应定期评估和审查所使用的插件，并确保它们对项目有价值并符合项目的长期需求。最重要的是，我们应该积极地学习和探索新的技术和工具，以提高自己的技术水平和解决问题的能力。
所以，我们也应该多尝试手动实现一些插件所带来的功能点。
实践
这里就针对一个图片翻转预览功能，做一下自定义实现步骤的笔记。
需求
即展示服务图片，默认显示主图，可左右切换查看图片，首尾不循环，点击图片可放大查看。
UI样式大致如下：
拆解
从UI原型图中，即可知道，图片翻转包含了左右翻转按钮、中间部分则直接定位当前元素高亮的位置。 而显示在中间的图片，则要填充整个宽度，并固定高度。
而且左右切换的时候，需要包括滑动动效效果。
实现过程
定义代码布局
<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
代码如下：
centerImage {
border-radius: 8px;
height: inherit;
width: 100%;
object-fit: cover; /* 保持图片原始比例，可能会留有空白区域 */
}
到此这篇关于基于Vue3自定义实现图片翻转预览功能的文章就介绍到这了,更多相关Vue3图片翻转预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！