實現Vue中無需刷新頁面即可改變頁面方向
P粉333395496
P粉333395496 2023-09-11 16:48:55
0
2
605

我希望當在Pinia中的值發生變化時,也能改變頁面的方向,程式碼運作正常,但頁面會重新載入,我不希望頁面重新載入。

這是我的App.vue

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

theme.value === "dark" ? document.documentElement.classList.add("dark") : false; //works
language.value === 'ar' ? document.documentElement.setAttribute('dir','rtl'): false // 需要重新加载页面
</script>

<template>
  <router-view></router-view>
</template>
P粉333395496
P粉333395496

全部回覆(2)
P粉274161593

需要進行常規資料綁定。在這種情況下,使用一個觀察者來實現。

watch(
  language,
  value => {
   if (value === 'ar')
     document.documentElement.setAttribute('dir','rtl')
   else 
     document.documentElement.removeAttribute('dir')
  },
  { immediate: true }
)

請確保在伺服器端渲染時不要存取document

P粉317679342

嘗試將您的內容放在另一個元素中,而不是修改document。此外,使用計算屬性進行響應性。

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";
import { computed } from "vue";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

const direction = computed(() => language.value === 'ar' ? 'rtl' : 'auto')
</script>

<template>
  <div :class="theme" :dir="direction">
    <router-view></router-view>
  </div>
</template>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板