Body 元素上的 Vue JS 样式绑定
Posted
技术标签:
【中文标题】Body 元素上的 Vue JS 样式绑定【英文标题】：Vue JS style binding on the Body Element 【发布时间】：2021-10-07 02:18:48 【问题描述】：我的前端有整个主题系统 它基于使用 mixin 更改 CSS 变量来更改颜色：
--sysPrimary: #03d5f7;
--sysSecondary: #05fcac;
--sysHover: #76D9F5;
--sysWarning: #ff4146;
--sysBackground: #23242c;
--sysDarkbackground: #202228;
--sysInputBg: #494b54;
--sysGrey: #bbbbbb;
--sysText: #ffffff;
--menuPrimary: #03d5f7;
--menuSecondary: #05fcac;
--menuHover: #76D9F5;
--menuText: #000000;
--menuTextHover: #000000;
--menuIcons: #000000;
--menuIconsHover: #000000;
因此，只需单击一个按钮，我就可以选择一个键，css 变量也会相应地改变
_systemStyles()
return
'--sysPrimary': this._colorTheme.primary,
'--sysSecondary': this._colorTheme.secondary,
'--sysHover': this._colorTheme.hover,
'--sysWarning': this._colorTheme.warning,
'--sysBackground': this._colorTheme.bg,
'--sysDarkBackground': this._colorTheme.darkBg,
'--sysText': this._colorTheme.text,
'--sysGrey': this._colorTheme.grey,
'--menuPrimary': this._colorTheme.menu_primary,
'--menuSecondary': this._colorTheme.menu_secondary,
'--menuHover': this._colorTheme.menu_hover,
'--menuText': this._colorTheme.menu_text,
'--menuTextHover': this._colorTheme.menu_text_hover,
'--menuIcons': this._colorTheme.menu_icons,
'--menuIconsHover': this._colorTheme.menu_icons_hover,
,
我所做的只是在我的 app.vue 文件中添加:style="_systemStyles"，仅此而已……一切都是自动化的。
现在，当我使用在我的<body></body> 标记上呈现 html 元素的第三方库时出现问题。
由于我的应用程序嵌套在我的正文中，因此只有嵌套在我的应用程序中的元素会受到我的 CSS 变量更改的影响。
由于该库附加在主体级别...它仅获取变量的根定义。
我需要一种方法将我的 body 元素与我的 _systemStyles 对象进行样式绑定。
我尝试过的事情：
获取 body 元素并尝试用我的对象覆盖其样式 - 不计算
在我呈现应用程序的服务器上导入我的 scss 文件 - 没有真正发生超出范围
基本上就是这样......我想不出其他解决方案。
是的，当然我用谷歌搜索过，这是一个复杂的问题......
【问题讨论】：
【参考方案1】： ```document.body.style = `--sysPrimary:$this.COLOR_THEME.primary;--sysSecondary:$this.COLOR_THEME.secondary;--sysHover:$this.COLOR_THEME.hover;--sysWarning:$this.COLOR_THEME.warning;--sysBackground:$this.COLOR_THEME.bg;--sysDarkBackground:$this.COLOR_THEME.darkBg;--sysText:$this.COLOR_THEME.text;--sysGrey:$this.COLOR_THEME.grey;--menuPrimary:$this.COLOR_THEME.menu_primary;--menuSecondary:$this.COLOR_THEME.menu_secondary;--menuHover:$this.COLOR_THEME.menu_hover;--menuText:$this.COLOR_THEME.menu_text;--menuTextHover:$this.COLOR_THEME.menu_text_hover;--menuIcons:$this.COLOR_THEME.menu_icons;--menuIconsHover:$this.COLOR_THEME.menu_icons_hover`;```
使用插值解析普通样式字符串以覆盖正文样式
我正在使用观察者获取当前主题键并覆盖数据中的主题对象 - 这样我可以同时通过 JS 和 CSS 访问它:)
我的老板最终提出了解决方案。相当干净整洁
'$store.state.menu.themeKey':
handler(newVal)
if (newVal === this.COLOR_THEME.key) return;
this.COLOR_THEME =
...this.COLOR_SETS.find(theme => theme.key === newVal),
//shared across all sets
darkBg: '#202228',
warning: '#ff4146',
grey: '#bbbbbb',
;
document.body.style = `--sysPrimary:$this.COLOR_THEME.primary;--sysSecondary:$this.COLOR_THEME.secondary;--sysHover:$this.COLOR_THEME.hover;--sysWarning:$this.COLOR_THEME.warning;--sysBackground:$this.COLOR_THEME.bg;--sysDarkBackground:$this.COLOR_THEME.darkBg;--sysText:$this.COLOR_THEME.text;--sysGrey:$this.COLOR_THEME.grey;--menuPrimary:$this.COLOR_THEME.menu_primary;--menuSecondary:$this.COLOR_THEME.menu_secondary;--menuHover:$this.COLOR_THEME.menu_hover;--menuText:$this.COLOR_THEME.menu_text;--menuTextHover:$this.COLOR_THEME.menu_text_hover;--menuIcons:$this.COLOR_THEME.menu_icons;--menuIconsHover:$this.COLOR_THEME.menu_icons_hover`;
,
immediate: true,
,```
【讨论】：
以上是关于Body 元素上的 Vue JS 样式绑定的主要内容，如果未能解决你的问题，请参考以下文章