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

nfg76nw0 于 2023-10-19 发布在 Webpack

关注(0)|答案(2)|浏览(138)

我正在使用Vue.js和vue-i18 n来切换我的项目语言，而不需要刷新。然而，当我想在阿拉伯语和其他任何东西之间切换时，我需要将网站的设计从（从右到左）改为（从左到右），反之亦然。
它目前是这样做的，所以我需要刷新来加载我的rtl.scss文件：
这是在刷新时加载css的代码：

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

这是使页面刷新的代码：

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

2条答案

从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 */
}

一个简单的替代公认的解决方案：

const {t, locale} = i18n.global;

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

需要为每种语言添加一个text_direction属性（如果有的话，至少在后备语言中），值为rtl或ltr。每当区域设置改变时，这将更新根文档元素到当前语言的正确方向。
如果有必要的话，你可以编写依赖于该属性的CSS。
这避免了为每种语言都设置一个需要不同方向的条件。