通过在 Vuejs 中选择语言来改变方向

Question

我有语言 select 选项。如果我选择阿拉伯语，它会改变方向。

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

但这怎么可能呢？

Answer 1

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

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

Answer 2

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

要更改所有元素 direction，您必须遍历集合：

const elems = document.getElementsByTagName("*")
for (let elem of elems) {
    elem.style.direction = 'rtl'
}

但这仍然会包含<script>、<style>、<meta>标签，这不是最好的解决方案。

我的解决方案

我会在 css

中创建 class

html.is-rtl * {
    direction: rtl;
}

当您 select 从右到左阅读的语言时，只需切换 class。

languageSelection() {
  if (this.lang == 'arb') {
     document.querySelector('html').classList.add('is-rtl')
  }
}

Answer 3

你应该在里面管理它 App.vue。根据所选语言将自定义 css class 添加到 #App element.

<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>

保存和更改的最佳位置lang 是 vuex 商店。

通过在 Vuejs 中选择语言来改变方向

Change direction with selecting Language in Vuejs

javascript

css

right-to-left

vue.js

vuejs2

我的解决方案