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