簡介

在項目開發(fā)中，我們或許都習慣了插件的運用，因為這樣對我們的好處有如下：

• 擴展技術(shù)能力：通過使用不同的圖片翻轉(zhuǎn)等插件，我們將有機會探索和學習新的技術(shù)和工具。這些插件通常會提供新的特性和功能，使我們有機會提高自己的技術(shù)能力和技術(shù)廣度。
• 提高效率：圖片翻轉(zhuǎn)等插件可以讓我們更快地實現(xiàn)所需的效果，節(jié)省時間和精力。這些插件通常提供一些現(xiàn)成的功能和樣式，使我們能夠快速地應(yīng)用于自己的項目中，提高開發(fā)效率。
• 促進創(chuàng)造力和設(shè)計能力：使用多樣化的圖片翻轉(zhuǎn)等插件可以激發(fā)我們的創(chuàng)造力和設(shè)計能力。這些插件提供了各種各樣的美觀效果和交互式動畫，可以幫助我們更好地設(shè)計和構(gòu)建獨特而令人印象深刻的用戶界面。
• 學習最佳實踐：通過使用不同的插件，我們可以學習到更多關(guān)于最佳實踐和設(shè)計模式。這些插件通常由經(jīng)驗豐富的開發(fā)者開發(fā)，他們在插件中運用了一些最佳實踐和設(shè)計原則，通過研究這些插件源碼和文檔，我們可以借鑒和學習一些更好的編碼方法和設(shè)計思路。

但我們需要注意的是，盡管插件可以為我們提供一些幫助和便利，但過度依賴插件也可能帶來一些問題。我們應(yīng)該權(quán)衡使用插件的利弊，能夠理解其工作原理和潛在的問題。此外，我們還應(yīng)定期評估和審查所使用的插件，并確保它們對項目有價值并符合項目的長期需求。最重要的是，我們應(yīng)該積極地學習和探索新的技術(shù)和工具，以提高自己的技術(shù)水平和解決問題的能力。

所以，我們也應(yīng)該多嘗試手動實現(xiàn)一些插件所帶來的功能點。

實踐

這里就針對一個圖片翻轉(zhuǎn)預(yù)覽功能，做一下自定義實現(xiàn)步驟的筆記。

需求

即展示服務(wù)圖片，默認顯示主圖，可左右切換查看圖片，首尾不循環(huán)，點擊圖片可放大查看。

UI樣式大致如下：

拆解

從UI原型圖中，即可知道，圖片翻轉(zhuǎn)包含了左右翻轉(zhuǎn)按鈕、中間部分則直接定位當前元素高亮的位置。 而顯示在中間的圖片，則要填充整個寬度，并固定高度。

而且左右切換的時候，需要包括滑動動效效果。

實現(xiàn)過程

定義代碼布局

<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 來定義響應(yīng)式數(shù)據(jù)。images 是一個保存圖片URL的數(shù)組，currentIndex 是當前顯示圖片的索引。

通過計算屬性 currentImage，我們根據(jù) currentIndex 來獲取當前顯示的圖片的URL。

previousImage 和 nextImage 函數(shù)用于切換上一張和下一張圖片，通過更新 currentIndex 的值來實現(xiàn)圖片切換。

最后，定義了一個帶有過渡效果的 CSS 動畫，用于實現(xiàn)圖片的滑動效果

注： 針對代碼中的centerImage，我們需要對圖片做完全填充的效果 要按照圖片的長寬比例展示圖片，但又不壓縮或變形圖片，我們可以使用CSS的object-fit屬性。

object-fit屬性用于指定元素如何適應(yīng)其容器的高度和寬度。下面是一些常用的object-fit屬性值：

• fill：將整個元素填充到容器中，可能會導(dǎo)致圖片變形。
• contain：將整個元素縮放到容器中，保持圖片的原始寬高比，但可能會留有空白區(qū)域。
• cover：將元素等比例縮放，填滿容器，可能會裁剪掉部分圖片。
• none：保持圖片的原始尺寸，不進行任何縮放或適應(yīng)

所有我們可以選中cover

代碼如下：

centerImage {
    border-radius: 8px;
    height: inherit;
    width: 100%;
    object-fit: cover; /* 保持圖片原始比例，可能會留有空白區(qū)域 */
  }

到此這篇關(guān)于基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能的文章就介紹到這了,更多相關(guān)Vue3圖片翻轉(zhuǎn)預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！