85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
|
<div v-show="false" v-if="locales.length >=2" class="languageBox" @click="toggleOpen">
|
|
<div v-if="!open" class="current">{{ currentLanguage }}</div>
|
|
|
|
<transition name="slide">
|
|
<div v-if="open" class="options">
|
|
<span
|
|
v-for="localeItem in locales"
|
|
:key="localeItem.code"
|
|
:class="{ active: localeItem.code === locale }"
|
|
@click.stop="selectLanguage(localeItem.code)"
|
|
>
|
|
{{ localeItem.code }}
|
|
</span>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
const { locales, setLocale, locale } = useI18n()
|
|
|
|
const open = ref(false)
|
|
|
|
const toggleOpen = () => {
|
|
open.value = !open.value
|
|
}
|
|
|
|
const selectLanguage = (code) => {
|
|
setLocale(code)
|
|
open.value = false // nach Auswahl schließen
|
|
}
|
|
|
|
const currentLanguage = computed(() => locale.value.toUpperCase())
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.languageBox
|
|
position: relative
|
|
display: block
|
|
align-items: center
|
|
background: white
|
|
border: 1px solid #ccc
|
|
border-top-left-radius: 1rem
|
|
border-bottom-left-radius: 1rem
|
|
padding: 1rem .8rem 1rem 1rem
|
|
cursor: pointer
|
|
font-family: sans-serif
|
|
text-transform: uppercase
|
|
overflow: hidden
|
|
user-select: none
|
|
touch-action: manipulation
|
|
z-index: 14
|
|
.current
|
|
font-weight: bold
|
|
font-size: 1.2rem
|
|
|
|
.options
|
|
display: inline-flex
|
|
margin-left: .5rem
|
|
gap: 0.5rem
|
|
span
|
|
cursor: pointer
|
|
transition: all 0.3s ease
|
|
font-size: 1.1rem
|
|
&:hover
|
|
//font-weight: bold
|
|
font-size: 1.2rem
|
|
transform: scale(1.2)
|
|
&.active
|
|
font-weight: bold
|
|
font-size: 1.2rem
|
|
&:not(:last-child)::after
|
|
content: '|'
|
|
margin-left: 0.5rem
|
|
color: $pink
|
|
font-weight: normal
|
|
|
|
.slide-enter-active, .slide-leave-active
|
|
transition: all 0.3s ease
|
|
.slide-enter-from, .slide-leave-to
|
|
opacity: 0
|
|
transform: translateX(-10px)
|
|
</style> |