slibra-official-web/components/BaseLang.vue

<script setup lang="ts">
const { locale, setLocale } = useI18n();
const activeLangKey = ref(unref(locale));

const changeLanguage = (lang: 'zh' | 'en') => {
  activeLangKey.value = lang;
  setLocale(lang);
}
</script>

<template>
  <div class="lang-switch">
    <span :class="{ active: activeLangKey === 'zh' }" @click="changeLanguage('zh')">中</span>
    <span class="active px-[5px]"> / </span>
    <span :class="{ active: activeLangKey === 'en' }" @click="changeLanguage('en')" style="cursor: not-allowed;">En</span>
  </div>
</template>

<style scoped lang="scss">
.lang-switch {
  font-size: 14px;
    color: rgba(22, 22, 22, 0.5);

  &:nth-child(1), &:nth-child(3) {
    cursor: pointer;
  } 

  .active {
    color: #161616;
  }
}
</style>