duuliy

你不知道的国际化

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)