MUKI AI Summary
網站若有多語系需求，除了修改文字，還需根據語系調整 CSS 樣式。常見情況包括不同語系有不同的色彩、樣式或排版，及因語系文字長度不同而需調整寬度。
可用 this.$i18n.locale 抓取當前語系名稱，並用作 CSS class。程式碼示例中，根據語系名稱調整 .logo 的寬度。語系名稱預設在 lang/index.js，如 en_US、zh_TW，可自行調整。...
讓 i18n 能對應 CSS 樣式
如果網站有多語系的需求，除了修改文字之外，有可能還需要根據不同的語系，調整對應的 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 就是他的語系名稱，我們可以依照需求自行調整。
歡迎給我點鼓勵，讓我知道你來過 ：）
2