1234567891011121314151617181920212223242526272829303132 |
- <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>
|