RTL

1.使用ant design(默认支持RTL 但要换react技术栈代价高) 可提前选型

2.postcss提供了RTL插件

html元素做特殊处理添加dir属性

    let lan = JSON.parse(localStorage.getItem('languageInfo'));
    console.log('fhup', lan.language);
    if (lan.language === 'zh_CN') {
      document.documentElement.dir = 'ltr';
    } else {
      document.documentElement.dir = 'rtl'; // ar
    }

针对vue2的 style scoped 添加自己的样式

如果不能解析添加 html[dir='rtl'] .xxx

<style lang="less" scoped>
    [dir='rtl'] .topBar {
        background-color: red !important;
    }
    [dir='ltr'] .topBar {
      background-color: blue !important;
    }
<style>

在项目中使用postcss

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-rtlcss').postcssRTLCSS(), // 直接使用
    require('postcss-plugin-px2rem')({
      rootValue: 19.2, //换算基数，1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px
      // unitPrecision: 5, //允许REM单位增长到的十进制数字。
      //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
      propBlackList: ['border'], //忽略自适应属性黑名单
      exclude: false, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      selectorBlackList: ['html', 'body', '#app'], //要忽略并保留为px的选择器
      // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
      // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
      mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
      minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
    }),
  ],
};