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

日期：2020.02.14
留言數：0
標籤：技巧語系

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

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

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

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

詳細的程式碼如下：

<template>
  <div class="navbar">
    <div :class="langCSS" class="logo">{{ $t('navbar.admin') }}</div>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      langCSS: this.$i18n.locale
    }
  }
}
</script>

<style lang="scss" scoped="">
.logo {
  background: #555199;
  width: 230px;
  &.en_US {
    width: 270px;
  }
}
</style>

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

const messages = {  
  en_US: { },
  zh_TW: { }
}

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