Vue.js

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

Vue.js - 需要在不重新加载的情况下切换方向（rtl 到 ltr，反之亦然）