如何使用带 Nuxt.js 的 Tailwind 突出显示导航栏上的活动部分？

Question

我有一个包含不同 ID 部分和导航栏的单页网站。当用户在各个部分滚动页面时，我想更改导航栏上突出显示的 link。这是我的代码的样子。

<!-- components/Navbar.vue -->

<template>
  <nav class="fixed w-full px-6 py-4 bg-white">
    <div class="flex items-center justify-between">

      <div>
        <img width="32px" src="@/assets/logo.svg">
      </div>

      <ul class="flex space-x-8 text-sm text-white font-sans">
        <li><a href="#home" class="active border-b-2 border-red-500 pb-1">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>

    </div>
  </nav>
</template>

<!-- layouts/default.vue -->

<template>
  <div>
    <Navbar />
    <Nuxt />
  </div>
</template>

<!-- pages/index.vue -->

<template>
  <div>
    <Home />
    <Services />
    <Features />
    <Faq />
    <Contact />
  </div>
</template>

<!-- components/Home.vue -->

<template>
  <section id="home">
    <div class="w-full h-screen bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1533174072545">
      <div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
        <div class="text-center">
          <h1 class="text-blue-400 text-5xl font-black">My website</h1>
          <p class="text-white font-bold">What an awesome website</p>
        </div>
      </div>
    </div>
  </section>
</template>

每个组件（Home、Services、Features、Faq 和 Contact）都有一个 <section>，其 ID 为上面的例子。

感谢您的帮助:)

Answer 1

我终于找到了一个可以让我做我想做的事情的依赖！

依赖是vue2-scrollspy。 Nuxt.js 未正式支持它，但它运行良好。以下是配置方法：

//plugins/vue2-scrollspy.js

import Vue from "vue";
import Scrollspy, { Easing } from "vue2-scrollspy";
Vue.use(Scrollspy, { easing: Easing.Cubic.InOut });

//nuxt.config.js

export default {
  plugins: [
    { src: "~/plugins/vue2-scrollspy", ssr: false }
  ],
}

尽情享受吧！

如何使用带 Nuxt.js 的 Tailwind 突出显示导航栏上的活动部分？

How to highlight an active section on the navbar using Tailwind with Nuxt.js?

nuxt.js

tailwind-css