如何使用 Bulma 仅在 Vue 中的某些元素上设置 has-navbar-fixed-top 属性？

Question

我有一个用 Bulma 制作的自定义导航栏，我正在使用 Nuxt.js 创建我的应用程序。问题是我想将导航栏固定在顶部，但 仅在我的某些 视图中。例如，我想在我的索引页面和连接到索引的所有其他页面上使用导航，但我不想在我的登录和注册页面上使用它。

在 Bulma 文档中说：

Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page

如果我在我的 app.html 文件中这样做，我所有的视图都会在顶部填充。有没有办法覆盖 has-navbar-fixed-top 属性以在不需要它的视图上取消设置？或者我能以某种方式只将它设置为应该有它的 components/pages 吗？

Answer 1

您需要做的就是创建一个包含路径 (pagesWithNavBar) 和计算方法 (shouldHaveNavBar) 的数组，returns true 或 false 基于 url 中的当前路径是否匹配我们数组 (pagesWithNavBar) 中的任何项目，最后在 head 方法中添加一个检查，检查我们当前是否在我们的数组中包含路径的页面上！

.vue 文件 - 很可能是您的布局 -> 脚本标签

export default {
    data() {
      return {
        pagesWithNavBar: [
          "/login", "/signup" // add here all your paths where u wish to have your navbar
        ] 
      } 
    },
    computed: {
      shouldHaveNavBar() {
        return this.pagesWithNavBar.includes(this.$route.path)
      }
    },
    head() { // since nuxt.js uses vue-meta to update the document head and meta attributes 
             // you can also use it for your own good which means adding meta tags or editing
             // the attributes of a body tag! you can learn more here
             // https://nuxtjs.org/guide/views/#html-head
             // or here
             // https://github.com/declandewet/vue-meta#recognized-metainfo-properties
      return { 
        bodyAttrs: { 
          class: this.shouldHaveNavBar ? "has-navbar-fixed-top" : ""
        }
      }
    }
}

如何使用 Bulma 仅在 Vue 中的某些元素上设置 has-navbar-fixed-top 属性？

How to set has-navbar-fixed-top property only on some elements in Vue using Bulma?

css

vue.js

bulma

nuxt.js