时间戳

首页 > 解决方案 > 通过在 Vuejs 中选择语言来改变方向

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

但这怎么可能？

标签： javascriptcssvue.jsvuejs2right-to-left

解决方案

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

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

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

但这仍将包括<script>, <style>,<meta>标签，这不是最佳解决方案。

我的解决方案

我会在css中创建类

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

然后，当您选择从右到左阅读的语言时，只需切换类。

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

推荐阅读