用vue动态改变body背景

Posted 2023-02-22

【中文标题】用vue动态改变body背景

【英文标题】：Changing the body background dynamically with vue

【发布时间】：2019-11-30 14:11:03

【问题描述】：

我正在创建表单，希望用户为其表单选择背景颜色。 这种颜色选择会改变 body 标签的背景颜色。我给他们颜色选项，他们选择的任何颜色都会自动改变背景颜色。

我正在使用 laravel 和 Vue 做这个项目。我想知道动态执行此操作的最佳方法是什么，因为现在我运气不佳。

我发现了几种方法。第一种方法是创建一个改变主体背景颜色的 beforeCreate 钩子，如下所示：

beforeCreate() 
        this.color = 'bc-header-red';
        document.body.className = this.color;
    ,

但是，这并不能让我像我想要的那样更新背景颜色，即使使用 update() 钩子也不行。

第二种选择是做一个与我发现的类似的实现，link to jsfiddle。基本上，我可以将 body 标签的样式绑定到某个值。但是问题在于，body 标签在我的 laravel 刀片文件中，而不是在 vue js 文件中。我可以移动它吗？

还有哪些其他可能的实现或我可以做的事情？谢谢！

【问题讨论】：

使用vue的具体原因？

熟悉并在项目中需要它来满足其他需求

你在做一个组件吗？

是的，我正在开发一个“CreateGame”组件。但是，我希望能够改变整个页面的body标签，而不仅仅是组件的背景。

立即关注this.color。在观察者中设置身体类。随意更改this.color。

【参考方案1】：

你可以使用vue$emit：

在你的 Vue 组件中，你应该有一个处理颜色选择的方法，比如这个：

handleColorChoice() 
    this.color = this.colorChosen;
    document.body.className = this.color;

只需将其更改为发出所选颜色：

handleColorChoice() 
    this.color = this.colorChosen;
    document.body.className = this.color;
    this.$root.$emit('body-background-color', this.colorChosen);

现在，您有一个event，并且可以在您的主要组件上使用listen to it：

在您的主要组件中，在 mounted 方法中：

mounted() 
    this.$root.$on('body-background-color', function(color) 
        //handle the background color change here  
    );

希望对你有帮助。