你不知道的国际化
2022-4-15通用方案
大家都直接用react-i18next,element.locale 搭配各国语言词条来解决是吧
Vue.use(ELEMENT,{
i18n: (key, value) => i18n.t(key, value)
});
但是如果需求是不仅文字,还有布局也需要从右到左怎么处理呢?难道根据不同语言处理一次css布局吗?显然麻烦了
巧妙的办法
试试scaleX属性搭配root节点 dir=”rtl”/“ltr” ,没错,这个能很好解决布局问题.
.xxx {
transform: scaleX(-1);
margin-inline-start:20px;
padding-inline-start:20px;
}
.yyy{
transform: scaleX(-1);
margin-inline-end:20px;
padding-inline-end:20px;
}
.zzz{
text-align: start;
justify-content: start;
}
.right {
right: 20px;
}
html[dir="rtl"] .right {
left: 20px;
}
如果包含背景图,想办法转成图片然后
.rtl-img {
transform: scaleX(-1);
}
公共方法
isLocale(locale)