适配阿拉伯语镜像页面

适配阿拉伯语镜像页面

修改背景

• 负责某路由界面需要适配阿拉伯语言 由于阿拉伯语是从右往左读 所以对应的ui界面也需要修改 也是非常头疼 上网上查询了很多资料 都没有非常全面的解决办法或者文档过早没有参考性 所以自己查询资料加上调试 终于解决了这个问题

  例如下图：

  

• 由于我当前项目使用的是VUE2框架 同时多语言使用的是i18N依赖 大部分项目应该是通用的 如果有问题麻烦指出

切换阿拉伯语方法

• 在进行英文与阿拉伯语切换，除了语言上体现不一样，布局也要进行变化，具体代码如下：

  ① 首先现在i18N文件夹中新增项目中需要用到的ar语相关翻译文件

  

  ② 在index.js中引入阿拉伯语配置文件

  

  ③ 同时需要在当前文件中新增一个函数

  给html标签新增一个名称为lang 值为当前语言的属性

  判断当前语言是否为ar代表当前生效语言是阿拉伯语 如果为阿拉伯语则需要再新增一个属性dir同时赋值为rtl

  dir属性可以设置元素的显示方向，是从左往右(ltr)，还是从右往左(rtl)

  export function setI18nLanguage(lang) {
    i18n.locale = lang;
    document.querySelector('html').setAttribute('lang', lang);
    if (lang == 'ar') {
      document.querySelector('html').setAttribute('dir', 'rtl');
    } else {
      document.querySelector('html').removeAttribute('dir')
    }
    return lang;
  }
  

  ④ 同时在需要切换语言的界面 引入setI18nLanguage方法，同时在获取语言和切换语言时调用这个方法

  

  

  ​ 此时当页面切换为阿拉伯语时 就会发现基本样式已经完成了镜像翻转 但是可以发现使用的elementui中部分组件发生了错位或者其他预期外的问题

  

  ​ 比如这个下拉按钮没有反转到左边

  ⑤ dir属性只会把文字朝向发生变化 例如text-align属性 但是像浮动float或web开发常用的内外边距margin``padding和绝对定位值left``right都不能直接修改

  这个时候就需要单独文件单个修改css样式 例如 ：

  html[lang='ar'] .el-form-item__label {
      float: right;
  }
  html[lang='ar'] .el-input--suffix{
      .el-input__suffix {
          left: 5px;
          right: 0;
      }
  }
  

  这种写法用于将具有lang='ar'属性的HTML元素中的.el-form-item__label类的元素进行样式调整 不会影响其他语言下样式

  ⑥ 像这种elementui通用的样式如果单个修改的话比较浪费时间 还有一种比较简便的方法

  可以直接新建一个公共样式文件 例如ar_common.css

  

  其中可以将一些比较常用的 例如elementui或一些比较常用的margin-left``margin-right``padding-left``padding-right这种常用样式写在里面 当语言切换到阿拉伯语时 里面的样式可以自动切换为预期的效果

  例如：

  ar_common.css

  html[lang='ar'] .ml5 {margin-right: 5px;}
  html[lang='ar'] .ml30 {margin-right: 30px;}
  html[lang='ar'] .ml10 {margin-right: 10px;}
  html[lang='ar'] .ml20 {margin-right: 20px;}
  html[lang='ar'] .ml40 {margin-right: 40px;}
  html[lang='ar'] .ml80 {margin-right: 80px;}
  html[lang='ar'] .ml100 {margin-right: 100px;}
  html[lang='ar'] .mr5 {margin-left: 5px;}
  html[lang='ar'] .mr10 {margin-left: 10px;}
  html[lang='ar'] .mr20 {margin-left: 20px;}
  html[lang='ar'] .mr40 {margin-left: 40px;}
  html[lang='ar'] .mr80 {margin-left: 80px;}
  

  common.css

  .ml5 {margin-left: 5px;}
  .ml30 {margin-left: 30px;}
  .ml10 {margin-left: 10px;}
  .ml20 {margin-left: 20px;}
  .ml40 {margin-left: 40px;}
  .ml80 {margin-left: 80px;}
  .ml100 {margin-left: 100px;}
  .mr5 {margin-right: 5px;}
  .mr10 {margin-right: 10px;}
  .mr20 {margin-right: 20px;}
  .mr40 {margin-right: 40px;}
  .mr80 {margin-right: 80px;}
  

  修改后记得将ar_common.css文件在main.js中导入 即可解决镜像反转问题