讓 CSS 讀取 vue i18n 的語系並顯示對應的樣式

如果網站有多語系的需求,除了修改文字之外,有可能還需要根據不同的語系,調整對應的 CSS 樣式。

通常會碰到以下兩種情況:

  • 不同的語系有不同的色彩 / 樣式 / 或排版
  • 不同的語系有不同的寬度 (因為有的語系文字特別長)

我們可以直接用this.$i18n.locale 抓出當前的語系名稱,然後直接用這個語系名稱當做 CSS 的 class 即可。

詳細的程式碼如下:

JS

而 i18n 的語系名稱是怎麼來的呢?預設位置在 lang/index.js 裡:

JS

這裡的 en_US 以及 zh_TW 就是他的語系名稱,我們可以依照需求自行調整。