Vuejs2 Nuxt-操作文档bodyattrs类中的类属性
我一直在寻找一个很好的解决方案来动态修改可以附加到bodyAttrs的类,但没有成功。我没有找到专门针对我的情况的帖子。我希望有人能帮忙 我有一个我正在工作的项目,在这个项目中我使用带有SSR功能的Nuxt,该站点的属性可以通过用户配置进行操作。设置场景。。。用户可以操纵body标记,并可以更改背景颜色 我已经设置了文档()中定义的app.html页面。然后,我将头部设置为:Vuejs2 Nuxt-操作文档bodyattrs类中的类属性,vuejs2,nuxt.js,Vuejs2,Nuxt.js,我一直在寻找一个很好的解决方案来动态修改可以附加到bodyAttrs的类,但没有成功。我没有找到专门针对我的情况的帖子。我希望有人能帮忙 我有一个我正在工作的项目,在这个项目中我使用带有SSR功能的Nuxt,该站点的属性可以通过用户配置进行操作。设置场景。。。用户可以操纵body标记,并可以更改背景颜色 我已经设置了文档()中定义的app.html页面。然后,我将头部设置为: head() { return { bodyAttrs: { class
head() {
return {
bodyAttrs: {
class: this.dataLoaded ? "bodyAttr" : ""
}
};
}
下面是bodyAttr类的外观。这是启动时的默认值:
.bodyAttr {
background: linear-gradient(#0098db, #0046ad);
}
加载数据时,我需要将背景属性颜色动态更改为用户配置选择的值
有没有办法做到这一点。。。或者我是从错误的方向开始的?
谢谢。 < P>我会考虑从体标签中添加和/或移除类,然后在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将对body标记应用my gradient
类,将其设置为false将应用normal模式