Я создал компонент erosection.vue, в этом компоненте у меня есть метод iSdarkMode для переключения режимов Dark /Light.
Я хочу добавить фоновое изображение, когда режим света включен. Изображение загружается на вкладке «Сеть», но не отображается на странице. Если я удалю метод isDarkMode, он отображается. < /P>
Вот код: < /p>
v-if="!isDarkMode"
class="absolute w-full h-full bg-cover bg-center hero-image"
>
class="absolute bg-opacity-50 w-full h-full"
:class="[isDarkMode ? 'bg-black' : 'bg-white']"
>
Your Ultimate Blogging Platform!
Write, Share & Earn – Join the community.
Start Writing
Explore Blogs
import { inject } from "vue";
export default {
name: "HeroSection",
setup() {
const isDarkMode = inject("isDarkMode");
return { isDarkMode };
},
};
div .hero-image {
background-image: url("/images/tech-girl.jpg") !important;
background-size: cover !important;
background-position: center;
width: 100%;
height: 100%;
z-index: -1;
}
< /code>
import { ref, provide, watch, onMounted } from "vue";
export default {
name: "App",
setup() {
const isDarkMode = ref(localStorage.getItem("theme") === "dark");
// Persist to localStorage whenever isDarkMode changes
watch(isDarkMode, (newValue) => {
localStorage.setItem("theme", newValue ? "dark" : "light");
if (newValue) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
});
provide("isDarkMode", isDarkMode); // Provide isDarkMode
// Apply initial theme on mount
onMounted(() => {
if (isDarkMode.value) {
document.documentElement.classList.add("dark");
}
});
return {};
},
};
Подробнее здесь: https://stackoverflow.com/questions/794 ... -css-class
