Nuxt - 操纵文档 bodyattrs class 中的 class 属性

Question

我一直在寻找一个好的解决方案来动态修改可以附加到 bodyAttrs 的 class，但没有成功。我没有找到具体 address/answer 我的情况的帖子。希望有人能帮忙。

我有一个正在处理的项目，在该项目中我正在使用具有 SSR 功能的 Nuxt，该站点具有可以通过用户配置进行操作的属性。设置场景...用户可以操纵正文标签，并且可以更改背景颜色。

我已经设置了文档中定义的 app.html 页面 (https://nuxtjs.org/guide/views#document)。然后我把头设置成这样：

head() {
    return {
        bodyAttrs: {
            class: this.dataLoaded ? "bodyAttr" : ""
        }
    };
}

这是 bodyAttr class 的样子。这是启动时的默认值：

.bodyAttr {
    background: linear-gradient(#0098db, #0046ad);
}

加载数据时，我需要将背景属性颜色动态更改为用户配置选择的值。

有没有办法做到这一点......或者我是从错误的方向接近这个？谢谢。

Answer 1

我会考虑添加 and/or 从正文标签中删除 classes，然后在您的 CSS 中为那些 classes 定义样式。

export default {
    data() {
        return {
            darkMode: false
        }
    },
    head() {
        return {
            bodyAttrs: {
                class: this.darkMode ? 'my-gradient' : 'normal-mode'
            }
        }
    },

}

然后在你的某处 CSS:

.my-gradient {
        background: linear-gradient(#0098db, #0046ad);
}
.normal-mode {
    background: none;
}

在上面的示例中，将 darkMode 设置为 true 会将 my-gradient class 应用于 body 标签，将其设置为 false 将应用 normal-mode.

Nuxt - 操纵文档 bodyattrs class 中的 class 属性

Nuxt - manipulating class properties in the document bodyattrs class

vuejs2

nuxt.js