45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<script setup>
|
|
import { useI18n } from "vue-i18n";
|
|
import { ref, onMounted } from "vue";
|
|
|
|
const { locale } = useI18n(); // 使用 I18n
|
|
const language = ref(locale.value)
|
|
// 切換語言
|
|
const toggleLanguage = (lang) => {
|
|
locale.value = lang;
|
|
localStorage.setItem("CviLanguage", lang);
|
|
language.value = lang;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dropdown dropdown-bottom dropdown-end">
|
|
<button
|
|
tabindex="0"
|
|
type="button"
|
|
class="flex flex-col justify-center items-center btn-group"
|
|
>
|
|
<span
|
|
:class="`fi fi-${language} fis text-3xl rounded-full border-1 border-white`"
|
|
></span>
|
|
<span class="text-white">{{ $t("language") }}</span>
|
|
</button>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-36 bg-[#4c625e] border text-center"
|
|
>
|
|
<li class="text-white" @click="toggleLanguage('tw')">
|
|
<span><span class="fi fi-tw"></span>繁體中文</span>
|
|
</li>
|
|
<li class="text-white" @click="toggleLanguage('cn')">
|
|
<span><span class="fi fi-cn"></span>简体中文</span>
|
|
</li>
|
|
<li class="text-white" @click="toggleLanguage('us')">
|
|
<span><span class="fi fi-us"></span>English</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|