102 lines
2.0 KiB
Vue
102 lines
2.0 KiB
Vue
<template>
|
|
<div class="locale-selector">
|
|
<a href="#" @click.prevent.stop="toggle">
|
|
<img class="globe-image" :src="getFlagImage($i18n.locale)" alt="">
|
|
<span>{{ selectedLocale }}</span>
|
|
<img src="@images/arrow-down.svg" alt="">
|
|
</a>
|
|
<div class="options" v-if="active">
|
|
<div class="item" v-for="(value, key) in locales" :key="key" @click.prevent.stop="changeLocale(key)">
|
|
<img class="select-image" :src="getFlagImage(key)" alt="" srcset="">
|
|
<span>{{ value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const locales = {
|
|
// de: 'Deutsche',
|
|
en: 'English',
|
|
es: 'Español'
|
|
}
|
|
export default {
|
|
data() {
|
|
return {
|
|
active: false,
|
|
locales,
|
|
}
|
|
},
|
|
computed: {
|
|
selectedLocale() {
|
|
return this.locales[this.$i18n.locale];
|
|
}
|
|
},
|
|
methods: {
|
|
toggle() {
|
|
this.active = !this.active;
|
|
},
|
|
changeLocale(locale) {
|
|
this.$i18n.locale = locale;
|
|
this.active = false;
|
|
},
|
|
getFlagImage(locale) {
|
|
return this.$helper.getImage(`flag-${locale}.png`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.locale-selector {
|
|
display: inline;
|
|
position: relative;
|
|
|
|
.globe-image{
|
|
height: 14px;
|
|
}
|
|
|
|
.select-image{
|
|
height: 18px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
margin-right: 5px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.options {
|
|
padding: 8px 0 8px;
|
|
display: inline-block;
|
|
width: 120px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 24px;
|
|
background: #121212;
|
|
border-radius: 5px;
|
|
color: #fefefe;
|
|
}
|
|
.item {
|
|
cursor: pointer;
|
|
padding: 8px 0 8px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: #FECE16;
|
|
background: #111;
|
|
}
|
|
}
|
|
}
|
|
</style> |