zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: change language revert

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-05 13:03:04 +08:00
parent b385ab7307
commit 0540ae3b96
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/plugins/vuetify/@core/components/I18n.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import { defineEmits, ref } from 'vue'
import type { Anchor } from 'vuetify/lib/components'; import type { Anchor } from 'vuetify/lib/components';
import type { I18nLanguage } from '@layouts/types'; import type { I18nLanguage } from '@layouts/types';
@ -7,7 +8,7 @@ const props = withDefaults(defineProps<Props>(), {
location: 'bottom end', location: 'bottom end',
}); });
defineEmits<{ const emit = defineEmits<{
(e: 'change', id: string): void; (e: 'change', id: string): void;
}>(); }>();
@ -16,32 +17,38 @@ interface Props {
location?: Anchor; location?: Anchor;
} }
const { locale } = useI18n({ useScope: 'global' }); let { locale } = useI18n({ useScope: 'global' });
watch(locale, (val) => { watch(locale, (val) => {
document.documentElement.setAttribute('lang', val as string); document.documentElement.setAttribute('lang', val as string);
}); });
const currentLang = ref(localStorage.getItem('lang') || 'en'); let currentLang = ref(localStorage.getItem('lang') || 'en');
function changeLang(lang: string){
locale = lang
currentLang.value = lang
emit('change', lang)
}
</script> </script>
<template> <template>
<div class="dropdown dropdown-end"> <div
class="dropdown"
:class="currentLang === 'ar'?'dropdown-right': 'dropdown-bottom dropdown-end'"
>
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1"> <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
<Icon icon="mdi-translate" class="text-2xl" /> <Icon icon="mdi-translate" class="text-2xl" />
</label> </label>
<ul <ul
tabindex="0" tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
> >
<li v-for="lang in props.languages" :key="lang.i18nLang"> <li v-for="lang in props.languages" :key="lang.i18nLang">
<a <a
class="hover:bg-base-content" class="hover:bg-base-content"
:class="{ 'text-primary': currentLang === lang.i18nLang }" :class="{ 'text-primary': currentLang === lang.i18nLang }"
@click=" @click="changeLang(lang.i18nLang)"
locale = lang.i18nLang;
$emit('change', lang.i18nLang);
"
>{{ lang.label }}</a >{{ lang.label }}</a
> >
</li> </li>