【问题标题】:Scoped css for Nuxt.js layoutNuxt.js 布局的作用域 css
【发布时间】:2019-03-03 08:42:32
【问题描述】:

我正在使用 nuxt,并且我的导航有一个标题布局。 此导航的背景颜色为白色。

在一个特殊的页面上,我想让导航背景颜色透明。 (仅限本页)

这些我都试过了:

这将使背景对所有页面都是透明的。(我不希望这样)

<style lang="css">
nav {
background-color: rgba(0, 0, 0, 0);
}

这不起作用,因为我的导航不在此页面中,它包含在 nuxt 布局中。

<style lang="css" scoped>
nav {
background-color: rgba(0, 0, 0, 0);
}

也试过了!important,但它不起作用..

除了使标题透明的新布局之外,您有什么建议吗?

【问题讨论】:

    标签: css vue.js nuxt.js


    【解决方案1】:

    我能想到各种解决方案,但有不同程度的hackiness。

    简单 - 最可靠 - 直接 DOM 操作 这是不太具体的 Vue/Nuxt。您可以只向元素添加一个类,然后在期望的组件正确的生命周期方法中附加另一个具有所需样式的类

    更多工作 - 仍然可靠 - Vuex 商店 使用 Vuex 存储来存储您想要从组件传递到布局的任何道具。感觉只是简单地设置背景颜色有点过头了。但是谁知道你将来还想设置什么,并且设置一个 Vuex 商店并不难。

    更多工作 - 最不现实 - 路由器卫士 您可以添加特定的路线检查,以在到达特定路线或路线包含特定字符串等时设置背景颜色。这不是一个好的解决方案,因为如果路线发生变化,它在未来被破坏的可能性最高.

    【讨论】:

    • 感谢您提供这些解决方案!
    【解决方案2】:

    在这个特殊页面的正文中包含一个类名:

    <body class="special">
    

    然后在您的 CSS 中包含仅适用于该页面的导航规则:

    body.special nav {
      background-color: rgba(0, 0, 0, 0);
    }
    

    【讨论】:

    • 忘了说我正在使用 nuxt。所以我不能只在这个页面上为 body 设置类。但是仍然......像你的例子那样增加特异性是行不通的。我试过了!important PS:我应该像你一样快按“没用”按钮吗?
    • @MSergiu 在指责人们没有做的事情之前,您应该考虑一下。
    • 对不起。你是唯一一个回复的,所以我猜是你。并感谢您提供帮助;)
    • @MSergiu 您可以有条件地为特定页面上的正文设置类,请检查:github.com/nuxt/nuxt.js/issues/1662#issuecomment-370567465
    猜你喜欢
    • 2019-01-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-01-06
    • 2011-08-21
    • 2018-09-16
    • 1970-01-01
    相关资源
    最近更新 更多