Vue.js - 需要在不重新加载页面的情况下切换方向（从右到左或从左到右）

Question

4

我正在使用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()
}

- Omar Samman

4

一种方法是向 <body> 添加/删除一个类，并根据不同的 body 类使用不同的 CSS。 - Jacob Goh

这样是行不通的！！你需要向应用程序根元素添加一个类，并相应地进行样式设置。或者你需要使用纯JS手动将<link>标签附加到body中。 - shakee93

1

@shakee93 谢谢，伙计。我之前试过了，但对我没用。 - Omar Samman

2个回答

1

一个简单的替代方案：

const {t, locale} = i18n.global;

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

需要为每种语言（至少在回退语言中）添加一个text_direction属性，其值可以是rtl或ltr。每当区域设置更改时，这将更新根文档元素以适应当前语言的正确方向。

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

这样可以避免为每种需要不同方向的语言编写条件语句。

- Elon61

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Issam Rafihi · Accepted Answer

根据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 */
}