Nuxt-在文档bodyattrs类中操作类属性

时间:2018-10-08 22:24:33

标签: vuejs2 nuxt

我一直在寻找一种很好的解决方案来动态修改可以附加到bodyAttrs的类,但没有成功。我没有找到任何专门解决/回答我的情况的帖子。我希望有人能提供帮助。

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

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

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

这是bodyAttr类的外观。这是启动时的默认值:

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

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

有没有办法做到这一点...或者我是从错误的方向走过来的? 谢谢。

1 个答案:

答案 0 :(得分:0)

我会考虑从body标签中添加和/或删除类,然后在CSS中为这些类定义样式。

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类应用于body标签,将其设置为false将会应用normal-mode