Vue.js - 需要切换方向（从 rtl 到 ltr，反之亦然）而无需重新加载

Question

我使用 Vue.js 和 vue-i18n 来切换项目中的语言，而无需刷新。但是，当我想在阿拉伯语和其他语言之间切换时，我需要将网站的设计从（从右到左）更改为（从左到右），反之亦然。

它目前是这样我需要刷新来加载我的 rtl.scss 文件：

这是刷新时加载 css 的代码：

let locale = VueCookie.get('locale') || 'en'
if (locale === 'ar') {
  require('rtl.scss')
}

这是使页面刷新的代码：

if (newLocale === 'ar' || oldLocale === 'ar') {
  window.location.reload()
}

Answer 1

离开 Jacob Goh 的评论，您可以执行以下操作：

将您的第一个片段更改为：

require('rtl.scss')
let locale = VueCookie.get('locale') || 'en'
if (locale === 'ar') {
  document.querySelector('body').classList.toggle('rtl');
}

你的第二个：

if (newLocale === 'ar' || oldLocale === 'ar') {
  document.querySelector('body').classList.toggle('rtl');
}

最后将你的 rtl.scss 文件编辑为：

body.rtl {
  /* Old scss */
}

Answer 2

已接受解决方案的简单替代方案：

const {t, locale} = i18n.global;

watchEffect(() => {
    document.dir = t('text_direction');
    document.documentElement.lang = locale.value;
})

需要为每种语言添加

text_direction

属性（至少在后备语言中，如果有的话），值为

rtl

或

ltr

。每当区域设置发生变化时，这都会将根文档元素更新为当前语言的正确方向。

如果有必要，您可以编写 CSS 来依赖于该属性。

这避免了每种语言都需要不同方向的条件。