Nuxt框架中內置組件詳解及使用指南(三)

来源:https://www.cnblogs.com/Amd794/p/18290294
-Advertisement-
Play Games

title: Nuxt框架中內置組件詳解及使用指南(三) date: 2024/7/8 updated: 2024/7/8 author: cmdragon excerpt: 摘要:“Nuxt 3框架中與組件的深度使用教程,包括如何使用這兩個組件進行頁面導航和載入指示的自定義配置與實戰示例。” ca ...



title: Nuxt框架中內置組件詳解及使用指南(三)
date: 2024/7/8
updated: 2024/7/8
author: cmdragon

excerpt:
摘要:“Nuxt 3框架中組件的深度使用教程,包括如何使用這兩個組件進行頁面導航和載入指示的自定義配置與實戰示例。”

categories:

  • 前端開發

tags:

  • Nuxt3
  • 組件
  • NuxtLink
  • 導航
  • 鏈接
  • 載入
  • 自定義

image

image

掃描二維碼關註或者微信搜一搜:編程智域 前端至全棧交流與成長

Nuxt 3 中<NuxtLink>組件的使用指南與示例

NuxtLink 是 Nuxt.js 框架提供的一種組件,用於在 Vue.js 應用程式中創建鏈接。它結合了 Vue Router 的強大功能與 HTML<a>
標簽的簡潔性,使得在 Nuxt.js 應用中創建內部和外部鏈接變得輕而易舉。NuxtLink
組件能夠智能地處理鏈接的優化,如預載入、預設屬性等,為開發者提供了一種高效、靈活的鏈接解決方案。

在 Nuxt.js 應用中,使用 NuxtLink 組件創建鏈接非常簡單。只需要將<NuxtLink>標簽包裹在你想要鏈接的文本或內容上,然後指定to
屬性即可。下麵是一個創建內部鏈接的示例:

<template>
  <NuxtLink to="/about">
    關於頁面
  </NuxtLink>
</template>

對於外部鏈接,只需將鏈接地址作為to屬性的值即可:

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt 網站
  </NuxtLink>
</template>

NuxtLink 組件提供了豐富的屬性來增強鏈接的交互性和功能:

  • target屬性:允許指定鏈接在新標簽頁中打開,如target="_blank"
  • rel屬性:用於設置鏈接的 rel 屬性,如rel="noopener noreferrer",適用於外部鏈接。
  • noRel屬性:當鏈接需要外部鏈接的行為但不需要 rel 屬性時,可以使用此屬性。
  • activeClassexactActiveClass:用於自定義活動鏈接和精確活動鏈接的類,幫助實現更豐富的視覺效果。
  • replace屬性:控制鏈接點擊時是否替換當前頁面歷史記錄。
  • ariaCurrentValue屬性:用於設置活動鏈接的 aria-current 屬性,提高無障礙訪問性。
  • external屬性:強制將鏈接視為外部鏈接或內部鏈接。
  • prefetchnoPrefetch:控制是否為即將進入視口的鏈接預載入資源。
  • prefetchedClass:應用於已預載入鏈接的類。
  • custom屬性:允許完全自定義鏈接的渲染方式和導航行為。

覆蓋預設值

如果你希望自定義 NuxtLink 的某些行為,可以通過創建自定義組件並使用defineNuxtLink函數來實現。這使得你可以根據特定需求調整鏈接的預設設置。

示例代碼:創建自定義鏈接組件

// components/MyNuxtLink.vue
export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  externalRelAttribute: 'noopener', // 自定義外部鏈接的 rel 屬性
  activeClass: 'my-active-class', // 自定義活動鏈接類
  exactActiveClass: 'my-exact-active-class', // 自定義精確活動鏈接類
  prefetchedClass: 'my-prefetched-class', // 自定義預載入鏈接類
  trailingSlash: 'remove', // 自定義尾部斜杠行為
})

完整示例:

  1. 項目結構- 你的 Nuxt.js 項目應該有以下的文件和目錄結構:
my-nuxt-app/
├── components/
│   └── MyNuxtLink.vue
├── pages/
│   ├── index.vue
│   └── about.vue
├── nuxt.config.js
└── package.json

  1. 創建自定義鏈接組件(components/MyNuxtLink.vue):
<template>
  <NuxtLink
    :to="to"
    :target="target"
    :rel="rel"
    :class="{'my-active-class': isActive, 'my-exact-active-class': isExactActive}"
  >
    <slot></slot>
  </NuxtLink>
</template>

<script>
export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  externalRelAttribute: 'noopener noreferrer',
  activeClass: 'my-active-class',
  exactActiveClass: 'my-exact-active-class',
  prefetchedClass: 'my-prefetched-class',
  trailingSlash: 'remove'
});
</script>

<style>
.my-active-class {
  color: red;
}

.my-exact-active-class {
  font-weight: bold;
}
</style>
  1. 首頁(pages/index.vue):
<template>
  <div>
    <h1>歡迎來到首頁</h1>
    <MyNuxtLink to="/about">關於頁面</MyNuxtLink>
    <MyNuxtLink to="https://nuxtjs.org" target="_blank" external>訪問 Nuxt.js 官網</MyNuxtLink>
  </div>
</template>

<script>
export default {
  components: {
    MyNuxtLink: () => import('~/components/MyNuxtLink.vue')
  }
}
</script>
  1. 關於頁面(pages/about.vue):
<template>
  <div>
    <h1>關於我們</h1>
    <MyNuxtLink to="/">返迴首頁</MyNuxtLink>
  </div>
</template>

<script>
export default {
  components: {
    MyNuxtLink: () => import('~/components/MyNuxtLink.vue')
  }
}
</script>
  1. 配置文件(nuxt.config.js):
export default {
  components: true, // 啟用自動導入組件
  // 其他配置...
}

  1. 啟動項目- 在項目根目錄下運行以下命令啟動開發伺服器:
npm run dev

打開瀏覽器並訪問http://localhost:3000,你應該能看到首頁,並且可以通過自定義的 MyNuxtLink 組件導航到“關於頁面”或者打開新標簽頁訪問
Nuxt.js 官網。

Nuxt 3 中<NuxtLoadingIndicator>組件的使用指南與示例

Nuxt Loading Indicator 是 Nuxt.js 應用程式中一個實用的組件,用於在頁面載入或導航時顯示載入進度條。這不僅提升用戶體驗,還能為用戶顯示應用程式正在執行的操作,從而減少不確定性。

如何使用 Nuxt Loading Indicator?

在 Nuxt.js 應用中,要使用 Nuxt Loading Indicator,首先需要在你的app.vue或任何佈局文件中引入並添加此組件。以下是一個簡單的示例:

<template>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator /> <!-- 這裡是載入指示器的位置 -->
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

Nuxt Loading Indicator 的關鍵屬性

  1. color:設置進度條的顏色。預設為黑色,你可以根據需要調整顏色。
  2. height:進度條的高度,以像素為單位。預設值為 3px。
  3. duration:進度條顯示的持續時間,以毫秒為單位。預設為 2000 毫秒。
  4. throttle:進度條出現和隱藏的節流時間,以毫秒為單位。預設為 200 毫秒。

如何自定義 Nuxt Loading Indicator

Nuxt Loading Indicator 支持通過預設插槽傳遞自定義 HTML 或組件,允許你根據特定需求定製進度條的外觀和行為。

示例代碼

假設你想要創建一個更自定義的進度條,可以使用以下代碼:

<template>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator
        :color="customColor"
        :height="customHeight"
        :duration="customDuration"
        :throttle="customThrottle"
      >
        <!-- 自定義內容 -->
        <div class="custom-loading-text">載入中...</div>
      </NuxtLoadingIndicator>
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

<script>
export default {
  data() {
    return {
      customColor: '#FF5733', // 自定義顏色
      customHeight: 5, // 自定義高度
      customDuration: 1500, // 自定義持續時間
      customThrottle: 500, // 自定義節流時間
    };
  },
};
</script>

<style scoped>
.custom-loading-text {
  color: #fff;
  font-size: 18px;
  text-align: center;
  margin-top: 50px;
}
</style>

完整示例:

餘下文章內容請點擊跳轉至 個人博客頁面 或者 掃碼關註或者微信搜一搜:編程智域 前端至全棧交流與成長,閱讀完整的文章:Nuxt框架中內置組件詳解及使用指南(三) | cmdragon's Blog

往期文章歸檔:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在Objective-C進行iOS開發中,UILabel是一個非常基礎且常用的UI組件,用於在應用界面上顯示一段靜態文本。UILabel屬於UIKit框架的一部分,提供了豐富的屬性來控制文本的顯示方式,包括文本內容、字體、顏色、對齊方式、行數等。 創建和配置UILabel 創建一個UILabel實例 ...
  • 在iOS開發中,UITableView和UICollectionView是兩個非常核心的用於展示集合數據的UI組件。它們都能以列表的形式展示數據,但各自的特點和使用場景有所不同。 UITableView UITableView用於展示和管理垂直滾動的單列數據列表。它是以行的形式展示數據,每行(cel ...
  • 咱們國內現在手機分為兩類,Android手機與蘋果手機,現在用的各類APP,為了手機的使用安全,避免下載到病毒軟體,官方都極力推薦使用手機自帶的應用商城進行下載,但是國內Android手機品類眾多,手機商城各式各樣,做不到統一,所以Android的APP上架得一個一個平臺去申請上架,一直讓開發人員頭... ...
  • UINavigationController 是 iOS 中用於管理視圖控制器層次結構的一個重要組件,通常用於實現基於堆棧的導航。它提供了一種用戶界面,允許用戶在視圖控制器之間進行層次化的導航,例如從列表視圖到詳細視圖。 UINavigationController 的主要功能 管理視圖控制器堆棧: ...
  • UITabBarController 是 iOS 中用於管理和顯示選項卡界面的一個視圖控制器。它允許用戶在多個視圖控制器之間進行切換,每個視圖控制器對應一個選項卡。 主要功能 管理多個視圖控制器: UITabBarController 管理一個視圖控制器數組,每個視圖控制器對應一個選項卡。 顯示選項 ...
  • 在MVC模型中,V指view,負責用戶界面的顯示、處理用戶輸入,並將輸入傳遞給控制器。C是指ViewController,充當模型和視圖之間的中介。控制器接收用戶輸入,處理用戶請求,並將結果傳遞給視圖以更新顯示。本文詳細介紹在iOS開發中UIView與UIViewController的生命周期。 U ...
  • ‍ 寫在開頭 點贊 + 收藏 學會 理解 forEach JavaScript 的forEach方法是一種流行的數組迭代工具。它為每個數組元素執行一次提供的函數。但是,與傳統的for 和 while迴圈不同,forEach它被設計為對每個元素執行該函數,沒有內置機制來提前停止或中 ...
  • 本文介紹了NodeJS中流(Stream)的概念、類型和應用。流通過將數據分成小塊進行處理,優化了記憶體使用和數據處理效率。文章涵蓋了四種基本流類型:可讀流、可寫流、雙工流和轉換流,並通過實例代碼演示瞭如何使用流進行高效的數據傳輸和處理。 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...