我正在做一個Vue的練習(xí)題，我需要做一個顏色選擇器，然后改變頁面的背景來匹配所選的顏色。問題是，我需要動態(tài)設(shè)置的背景，但我不知道如何從一個組件改變的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的樣式，但它看起來只是這樣:

不僅如此，這個正方形只在我檢查元素的時候出現(xiàn)。

當(dāng)我嘗試更改的CSS背景時，我得到的是background: var( - 7a7a37b1-color)并且顏色沒有改變。這是我為了時尚而做的:

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

我如何使整個頁面的背景改變以匹配顏色選擇器的顏色？

是的，樣式中v-bind的問題是，雖然規(guī)則適用于外部元素，但變量只在組件內(nèi)部定義。因此，您基本上是將html.background設(shè)置為一個空變量。

我認(rèn)為這是一個需要直接設(shè)置樣式的例子:

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