Nuxt框架中內建元件詳解及使用指南（五）

Amd794發表於2024-07-10
UX框架元件

title: Nuxt框架中內建元件詳解及使用指南（五）
date: 2024/7/10
updated: 2024/7/10
author: cmdragon

excerpt:
摘要：本文詳細介紹了Nuxt框架中和元件的使用方法與配置，包括安裝、基本用法、屬性詳解、示例程式碼以及高階功能如事件處理、自定義圖片屬性和圖片格式回退策略。同時，還簡述了元件的功能與基本用法，展示瞭如何將元件內容傳送到DOM中的不同位置，特別是對於模態框和側邊欄等UI元素的佈局最佳化。

categories:

  • 前端開發

tags:

  • NuxtJS
  • 元件
  • 影像
  • 最佳化
  • 響應
  • 預覽
  • 傳送

image

image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

Nuxt 中<NuxtErrorBoundary>元件的使用指南與示例

Nuxt 提供了一個 元件來處理自動影像最佳化。

安裝與配置

首先，確保你已經安裝了Nuxt.js，並且你的專案中已經啟用了Nuxt Image模組。這通常在專案建立時自動完成，如果沒有，你可以按照以下步驟操作：

npx nuxi@latest module add image

基本用法

元件可以直接替代原生[圖片上傳失敗...(image-ce4c63-1720592953905)]標籤，並輸出一個原生的img標籤，沒有任何包裝器。以下是如何使用它的基本示例：

<template>
  <NuxtImg src="/path/to/image.png" />
</template>

這將建立一個指向/path/to/image.png的img標籤。

屬性詳解

以下是一些主要的屬性及其用法：

  • src: 影像檔案的路徑。應採用目錄中靜態影像的絕對路徑形式。

    <NuxtImg src="/path/to/image.png" />

  • width / height: 指定影像的寬度/高度。

    <NuxtImg src="/path/to/image.png" width="200" height="200" />

  • sizes: 指定響應大小。

    <NuxtImg src="/path/to/image.png" sizes="sm:200px md:400px lg:600px" />

  • densities: 為不同畫素密度的螢幕生成特殊影像版本。

    <NuxtImg src="/path/to/image.png" densities="x1 x2" />

  • placeholder: 在實際影像完全載入之前顯示佔位符影像。

    <NuxtImg src="/path/to/image.png" placeholder="./placeholder.png" />

  • provider: 使用其他提供程式而不是預設提供程式。

    <NuxtImg provider="cloudinary" src="/remote/image.png" />

  • preset: 使用預定義的影像修飾符集。

    <NuxtImg preset="cover" src="/path/to/image.png" />

  • format: 指定影像的格式。

    <NuxtImg format="webp" src="/path/to/image.png" />

  • quality: 生成影像的質量。

    <NuxtImg src="/path/to/image.jpg" quality="80" />

  • fit: 指定影像的尺寸。

    <NuxtImg fit="cover" src="/path/to/image.png" />

  • modifiers: 使用提供程式的額外修飾符。

    <NuxtImg src="/path/to/image.png" modifiers="{ roundCorner: '0:100' }" />

  • preload: 預載入影像。

    <NuxtImg preload src="/path/to/image.png" />

  • loading: 控制影像的載入行為。

    <NuxtImg src="/path/to/image.png" loading="lazy" />

  • nonce: 用於內容安全策略的加密隨機數。

    <NuxtImg src="/path/to/image.png" :nonce="nonce" />

示例

以下是一個使用元件的完整示例，展示瞭如何結合使用多個屬性：

<template>
  <NuxtImg
    src="/path/to/image.png"
    width="200"
    height="200"
    sizes="sm:100px md:200px lg:400px"
    placeholder="./placeholder.png"
    provider="cloudinary"
    preset="cover"
    format="webp"
    quality="80"
    fit="cover"
    modifiers="{ roundCorner: '0:100' }"
    preload
    loading="lazy"
    :nonce="nonce"
  />
</template>

在這個示例中，我們使用了多個屬性來最佳化和展示影像。

事件

元件支援原生事件，你可以透過監聽這些事件來執行特定的操作。例如：

<template>
  <NuxtImg
    src="/path/to/image.png"
    @load="handleImageLoad"
  />
</template>

<script setup>
function handleImageLoad(event) {
  console.log('Image has been loaded!', event);
}
</script>

在這個示例中，當影像載入完成時，handleImageLoad函式將被呼叫。

Nuxt 3 中<NuxtPicture>元件的使用指南與示例

引入元件

在 Nuxt.js 專案中，您可以直接在頁面或元件中引入 <NuxtPicture> 和 <NuxtImg> 元件。

import { NuxtPicture, NuxtImg } from '#components';

示例程式碼

解釋

高階配置

設定回退格式

自定義圖片屬性

基本用法

1. 傳送到 body

2. 客戶端傳送

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog

往期文章歸檔：

  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（二） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（九） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（八） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（七） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（六） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（五） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（四） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（三） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（二） | cmdragon's Blog

相關文章