Question

我正在创建一个表单，希望用户为其表单选择背景颜色。 此颜色选择会更改body标签的背景颜色。我为他们提供了颜色选项，他们选择的任何颜色都应自动更改背景颜色。

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

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

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

但是，这不能让我像我想要的那样更新背景色，即使使用update（）钩子也是如此。

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

还有哪些其他可能的实现方式，或者我可以做些什么？谢谢！

Answer 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  
    });
}

希望有帮助。

通过vue动态更改身体背景

1 个答案: