1 line
2.5 KiB
Plaintext
1 line
2.5 KiB
Plaintext
{"version":3,"file":"LanguageSwitcher.vue2.mjs","sources":["../../../../components/LanguageSwitcher.vue"],"sourcesContent":["<template>\r\n <div class=\"relative\">\r\n <button \r\n @click=\"toggleDropdown\" \r\n class=\"flex items-center text-white/85 hover:text-secondary transition-colors duration-300\"\r\n >\r\n <span class=\"mr-1\">{{ currentLocale === 'zh' ? 'EN' : '中' }}</span>\r\n <i class=\"fas fa-chevron-down text-xs\"></i>\r\n </button>\r\n \r\n <div \r\n v-if=\"dropdownOpen\" \r\n class=\"absolute right-0 mt-2 bg-white rounded-md shadow-lg py-1 min-w-[100px] z-50\"\r\n >\r\n <button \r\n @click=\"changeLocale('zh')\" \r\n class=\"block w-full text-left px-4 py-2 text-gray-800 hover:bg-gray-100\"\r\n :class=\"{ 'bg-gray-100': currentLocale === 'zh' }\"\r\n >\r\n 中文\r\n </button>\r\n <button \r\n @click=\"changeLocale('en')\" \r\n class=\"block w-full text-left px-4 py-2 text-gray-800 hover:bg-gray-100\"\r\n :class=\"{ 'bg-gray-100': currentLocale === 'en' }\"\r\n >\r\n English\r\n </button>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onUnmounted } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\n\r\nconst i18n = useI18n();\r\nconst dropdownOpen = ref(false);\r\n\r\nconst currentLocale = computed(() => i18n.locale.value);\r\n\r\nconst toggleDropdown = () => {\r\n dropdownOpen.value = !dropdownOpen.value;\r\n};\r\n\r\nconst changeLocale = (locale: string) => {\r\n i18n.locale.value = locale;\r\n dropdownOpen.value = false;\r\n // 保存用户语言偏好到本地存储\r\n localStorage.setItem('user-locale', locale);\r\n};\r\n\r\n// 点击其他地方关闭下拉菜单\r\nconst handleClickOutside = (event: MouseEvent) => {\r\n const target = event.target as HTMLElement;\r\n if (!target.closest('.relative')) {\r\n dropdownOpen.value = false;\r\n }\r\n};\r\n\r\n// 从本地存储加载用户语言偏好\r\nonMounted(() => {\r\n const savedLocale = localStorage.getItem('user-locale');\r\n if (savedLocale) {\r\n i18n.locale.value = savedLocale;\r\n }\r\n \r\n document.addEventListener('click', handleClickOutside);\r\n});\r\n\r\nonUnmounted(() => {\r\n document.removeEventListener('click', handleClickOutside);\r\n});\r\n</script> "],"names":[],"mappings":";;;;;;;AAoCA,UAAM,OAAO,QAAQ;AACf,UAAA,eAAe,IAAI,KAAK;AAE9B,UAAM,gBAAgB,SAAS,MAAM,KAAK,OAAO,KAAK;;;;;;;;;;;;"} |