时间戳

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

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

问题描述

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

标签： javascriptwebpackvue.jspage-refreshvue-i18n

解决方案

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

推荐阅读