PR

Vueで、絵文字の国旗をドロップダウンリストに入れたい時の対処

Javascript
記事内に広告が含まれています。
スポンサーリンク

Vue + electronでアプリを作ったときに多言語化対応をしたのですが、セレクトボックスに言語名と国旗を併記したときの対処を記事にします。

スポンサーリンク

前提

イメージ

下図のようにセレクトボックスで、「国旗 言語名」で表示をしたかったのです。国旗は絵文字で対応しました。

実装

あらかじめ$i18n.messagesに選択肢となる言語(今回の場合、jaen)をmain.jsで記述している前提で、テンプレートでは次のような実装をしました。

<select v-model="$i18n.locale">
  <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ langName(locale) }}</option>
</select>

選択肢の文言は、computedに次のような実装をしました。ポイントはString.fromCodePoint()国旗の文字コードを指定しました。

langName: () => {
  return function (locale) {
    if (locale === 'ja') {
      return String.fromCodePoint(127471, 127477) + ' 日本語'
    } else {
      return String.fromCodePoint(127482, 127480) + ' English'
    }
  }
}

String.fromCodePoint() – JavaScript | MDN

Windows での国旗の扱い

Microsoftは政治的なリスクを回避するため、Windowsでは国旗の絵文字をアルファベットで示すようにしているとのことです。

🚩Windowsシステムでの国旗の絵文字はアルファベットで示すのはなぜ? | EmojiAll

コメント