适配阿拉伯语镜像页面

修改背景

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

例如下图：

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

切换阿拉伯语方法

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

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

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

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

给<code>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方法，同时在获取语言和切换语言时调用这个方法

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

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

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

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

html[lang='ar'] .el-form-item__label { -- -->code>

float: right;

}

html[lang='ar'] .el-input--suffix{ code>

.el-input__suffix { -- -->

left: 5px;

right: 0;

}

}

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

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

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

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

例如：

ar_common.css

html[lang='ar'] .ml5 { -- -->margin-right: 5px;}code>

html[lang='ar'] .ml30 { -- -->margin-right: 30px;}code>

html[lang='ar'] .ml10 { -- -->margin-right: 10px;}code>

html[lang='ar'] .ml20 { -- -->margin-right: 20px;}code>

html[lang='ar'] .ml40 { -- -->margin-right: 40px;}code>

html[lang='ar'] .ml80 { -- -->margin-right: 80px;}code>

html[lang='ar'] .ml100 { -- -->margin-right: 100px;}code>

html[lang='ar'] .mr5 { -- -->margin-left: 5px;}code>

html[lang='ar'] .mr10 { -- -->margin-left: 10px;}code>

html[lang='ar'] .mr20 { -- -->margin-left: 20px;}code>

html[lang='ar'] .mr40 { -- -->margin-left: 40px;}code>

html[lang='ar'] .mr80 { -- -->margin-left: 80px;}code>

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中导入 即可解决镜像反转问题