簡(jiǎn)介

在項(xiàng)目開(kāi)發(fā)中，我們或許都習(xí)慣了插件的運(yùn)用，因?yàn)檫@樣對(duì)我們的好處有如下：

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

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

所以，我們也應(yīng)該多嘗試手動(dòng)實(shí)現(xiàn)一些插件所帶來(lái)的功能點(diǎn)。

實(shí)踐

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

需求

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

UI樣式大致如下：

拆解

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

而且左右切換的時(shí)候，需要包括滑動(dòng)動(dòng)效效果。

實(shí)現(xiàn)過(guò)程

定義代碼布局

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

    <!-- 圖片切換過(guò)渡效果 -->
    <transition name="slide">
      <img :key="currentImage" :src="currentImage" alt="當(dāng)前圖片" 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 來(lái)定義響應(yīng)式數(shù)據(jù)。images 是一個(gè)保存圖片URL的數(shù)組，currentIndex 是當(dāng)前顯示圖片的索引。

通過(guò)計(jì)算屬性 currentImage，我們根據(jù) currentIndex 來(lái)獲取當(dāng)前顯示的圖片的URL。

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

最后，定義了一個(gè)帶有過(guò)渡效果的 CSS 動(dòng)畫(huà)，用于實(shí)現(xiàn)圖片的滑動(dòng)效果

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

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

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

所有我們可以選中cover

代碼如下：

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

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