VUE 不同语言使用不同 CSS

VUE 国际化使用了多语言 插件 vue-i18n, 但是还遇到不同语言文本长度不一致等问题.

解决方法

需要应用的标签添加 :lang="$i18n.locale"

<div class="foo" :lang="$i18n.locale"></div>

css 语法 :lang( <language-code> )

例如德语:

css

.foo:lang(de) {
    
    
  ...;
}

less

.foo {
  ... &:lang(de) {
    ...;
  }
}

这样语言为德语的情况下会应用 :lang(de) 里面的样式, 其他语言就不会

:lang - CSS（层叠样式表） | MDN
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang