如何动态更改 Vue 中更高级别的标签的 CSS

Question

我正在处理 Vue 中的一个练习题，我必须制作一个颜色选择器，然后更改页面的背景以匹配所选择的颜色。问题是我需要动态设置背景，但我不知道如何从组件更改它的 CSS。这是我的代码：

<!-- App.Vue -->
<script setup>
import { ColorPicker } from 'vue-accessible-color-picker';
import { ref, computed, watch } from 'vue';
const color = ref('hsl(270 100% 50% / 0.8)');
function updateColor(e) {
  color.value = e.cssColor
}

const setColor = computed(() => {
  return 'background: ' + color.value
})


</script>

<template>
  <div :style="setColor">
    <ColorPicker :color="color" @color-change="updateColor" />
  </div>
</template>

在这里，我在模板中更改了 div 的样式，但它只是看起来像这样：

不仅如此，这个正方形只会在我检查元素时出现。

当我尝试更改 的 CSS 背景时，我得到 background: var(--7a7a37b1-color) 并且颜色没有改变。这是我为风格而做的时候：

<style>
html {
  background: v-bind('color');
}
</style>

如何使整个页面的背景发生变化以匹配颜色选择器的颜色？

Answer 1

是的，样式中

v-bind

的问题是虽然规则确实适用于外部元素，但变量仅在组件内部定义。所以你基本上是将 html.background 设置为一个空变量。

我认为这是一个需要直接设置样式的例子：

function updateColor(e) {
  document.body.style.backgroundColor = e.cssColor
}