基于RTL/LTR方向应用CSS规则的Vue多语言网站开发问题

嘿，这个RTL/LTR样式适配的问题我之前也碰到过，给你几个靠谱的解决办法！

方法1：利用根元素的dir属性写后代选择器 #

你之前用&[dir]不生效，是因为&指代的是当前组件里的元素（比如你的标题），而dir属性是挂在根元素（html或者#app）上的，所以得通过祖先选择器来关联。

比如用Sass的话可以这么写：

.title {
  // LTR默认样式
  margin-left: 5px;

  // 当根元素是RTL时覆盖样式
  html[dir="rtl"] & {
    margin-left: 0;
    margin-right: 5px;
  }
}

如果你的Vue根组件是#app而不是直接绑在html上，就把html换成#app就行。这种方法兼容性拉满，所有浏览器都支持。

方法2：使用CSS :dir() 伪类 #

CSS有个专门针对文本方向的伪类:dir()，它会匹配所有继承或自身设置了对应方向的元素，写法更简洁：

.title {
  margin-left: 5px;

  :dir(rtl) & {
    margin-left: 0;
    margin-right: 5px;
  }
}

不过要注意，IE不支持这个伪类，但现在主流浏览器（Chrome、Firefox、Safari）都没问题，如果你的项目不需要兼容IE，这个方法更清爽。

方法3：用CSS变量统一管理方向相关样式 #

如果你的项目里有很多需要切换方向的样式（margin、padding、border、甚至定位），用CSS变量会更易于维护，不用重复写选择器：

首先在全局样式里定义变量：

/* 全局样式文件或者App.vue的style里 */
html[dir="ltr"] {
  --space-start: 5px;
  --space-end: 0;
}

html[dir="rtl"] {
  --space-start: 0;
  --space-end: 5px;
}

然后在组件里直接用变量：

.title {
  margin-left: var(--space-start);
  margin-right: var(--space-end);
}

以后要调整距离或者新增方向相关样式，只需要改全局变量就行，非常方便。

额外小提示 #

在Vue里绑定dir的时候，建议把它绑在根组件的最外层元素（比如#app）或者直接绑在html上，这样所有子组件都能继承这个方向属性，样式也能正确匹配。比如：

<template>
  <div id="app" :dir="currentDirection">
    <!-- 所有子组件都在这里面 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDirection: 'ltr'
    }
  },
  methods: {
    toggleDirection() {
      this.currentDirection = this.currentDirection === 'ltr' ? 'rtl' : 'ltr';
    }
  }
}
</script>

这样不管你的样式是写在全局还是单个组件里，只要用上面的方法关联根元素的dir属性，就能完美实现RTL/LTR的样式切换啦！

内容的提问来源于stack exchange，提问作者Thomas Ferro