Spaces:
Sleeping
Sleeping
File size: 1,363 Bytes
4634731 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <template>
<div class="lang-switcher" role="group" :aria-label="t('nav.langZh')">
<button
v-for="item in SUPPORTED_LOCALES"
:key="item.value"
type="button"
class="lang-btn"
:class="{ 'lang-btn--active': locale === item.value }"
@click="switchLocale(item.value)"
>
{{ t(item.labelKey) }}
</button>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { setAppLocale, SUPPORTED_LOCALES, type AppLocale } from '../i18n'
const { t, locale: i18nLocale } = useI18n()
const locale = computed(() => i18nLocale.value as AppLocale)
const switchLocale = (next: AppLocale) => {
if (next === locale.value) return
setAppLocale(next)
}
</script>
<style scoped>
.lang-switcher {
display: inline-flex;
border: 1px solid var(--ramex-border);
border-radius: var(--ramex-radius);
overflow: hidden;
}
.lang-btn {
padding: 0.35rem 0.65rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--ramex-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn:hover {
color: var(--ramex-text);
background: var(--ramex-bg-subtle);
}
.lang-btn--active {
color: var(--ramex-text);
font-weight: 600;
background: var(--ramex-bg-subtle);
}
</style>
|