vue3中的Bulma navbar无法修复

Question

我使用的是 vuejs 3 和 bulma 0.9.3。

我创建了一个导航栏并尝试在 NavBar.vue is-fixed-top 和 index.html has-navbar-fixed-top 中修复它。但是当我滚动页面时，导航栏仍然消失了。

组件 NavBar.vue class=is-fixed-top

<template>
  <nav
    class="navbar is-fixed-top is-primary"
    role="navigation"
    aria-label="main navigation"
  >
    <div class="navbar-brand">
      <a class="navbar-item" href="https://example.com">
        <img src="../assets/logo.png" width="50" height="28" />
      </a>
    </div>

    <div id="navbarBasic" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          <router-link to="/" class="nav-link">Home</router-link>
        </a>
      <div class="navbar-end">
      </div>
    </div>
  </nav>
</template>

导航栏用于App.vue

<template>
  <div id="app">
    <section>
      <NavBar></NavBar>
    </section>
    <main class="container content">
      <router-view />
    </main>
  </div>
</template>

<script>
import NavBar from "./components/NavBar";

export default {
  components: {
    NavBar,
  },
};
</script>

<style>
</style>

并且 index.html 包含 class has-navbar-fixed-top。

<!DOCTYPE html>
<html lang="" class="has-navbar-fixed-top">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body class="has-navbar-fixed-top">
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>
```

Answer 1

我使用的是旧的 bulma 版本。升级到较新版本解决了问题

vue3中的Bulma navbar无法修复

Bulma navbar in vue3 cannot be fixed

vue.js

bulma