Javascript 在Vuejs中选择语言更改方向

我有一个语言选择选项。如果我选择阿拉伯语，那么它将改变方向

* {
  direction: rtl!important;
}

当我使用这个时，整个方向变为从右到左。但是我怎样才能用方法做到这一点呢

methods: {
  languageSelection() {
     if(this.lang == 'arb') {
        document.getElementsByTagName("*")[0].style.direction = "rtl!important";
        document.getElementsByTagName("html")[0].style.direction = "rtl!important";
        document.getElementsByTagName("body")[0].style.direction = "rtl!important";
      }
   }
}

以上代码不起作用！ 如果我可以添加一个CSS文件，那么对我来说会更好。例如：

languageSelection() {
  if(this.lang == 'arb') {
     // active a css file like: style-rtl.css
  }
}

---

但是这怎么可能呢？

可以创建一个样式表并将其附加到头部：

languageSelection() {
  if(this.lang == 'arb') {
     const style = document.createElement('style');
     style.innerHTML = `*{direction:rtl!important}`;
     document.head.appendChild(style);
  }
}

嗯。因此，当您使用getElementsByTagName*[0]时，您可能会获得元素的句柄。因此，在下一行中访问的元素是相同的

要更改所有元素的方向，您必须迭代集合：

常量elems=document.getElementsByTagName* 让元素中的元素{ elem.style.direction='rtl' } 但这仍然包括标签，这不是最好的解决方案

我的解决方案 我将在css中创建类

html.is-rtl*{ 方向：rtl； } 然后，当您选择从右向左读取的语言时，只需切换该类

语言选择{ 如果this.lang==“arb”{ document.querySelector'html'.classList.add'is-rtl' } }

---

您应该在App.vue中管理它。将基于所选语言的自定义css类添加到App元素

---

保存和更改语言的最佳位置是vuex store。

它是每次更改语言还是一次创建？如果每次更改选择时都运行该函数，则选择“是”。首先，您必须添加一个ID并检查它是否不存在。我正在将语言变量存储在localStorage中。我考虑过vuex，但我认为最好使用本地存储。

<template>
  <div id="app" :class="{'dir-rtl': isRtl}">
    ...
  </div>
</template>
<script>
export default {
  computed: {
    isRtl () {
      return this.lang === 'arb'
    }
  }
}
</script>
<style lang="scss">
.dir-rtl {
  direction: rtl !important;
}
</style>