mirror of https://github.com/certd/certd
77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<template>
|
|
<a-dropdown class="fs-locale-picker">
|
|
<fs-iconify icon="ion-globe-outline" @click.prevent></fs-iconify>
|
|
<template #overlay>
|
|
<a-menu @click="changeLocale">
|
|
<a-menu-item v-for="item in languages" :key="item.key" :command="item.key">
|
|
<div class="language-item">
|
|
<span v-if="item.key === current" class="icon-radio">
|
|
<span class="iconify" data-icon="ion:radio-button-on" data-inline="false"></span>
|
|
</span>
|
|
<span v-else class="icon-radio">
|
|
<span class="iconify" data-icon="ion:radio-button-off" data-inline="false"></span>
|
|
</span>
|
|
{{ item.label }}
|
|
</div>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import i18n from "../../../i18n";
|
|
import { computed, inject } from "vue";
|
|
import { forEach } from "lodash-es";
|
|
export default {
|
|
name: "FsLocale",
|
|
setup() {
|
|
const languages = computed(() => {
|
|
const map: any = i18n.global.messages?.value || {};
|
|
const list: any = [];
|
|
forEach(map, (item, key) => {
|
|
list.push({
|
|
key,
|
|
label: item.label
|
|
});
|
|
});
|
|
return list;
|
|
});
|
|
const current = computed(() => {
|
|
return i18n.global.locale.value;
|
|
});
|
|
|
|
const routerReload: any = inject("fn:router.reload");
|
|
const localeChanged: any = inject("fn:locale.changed");
|
|
const changeLocale = (change: any) => {
|
|
i18n.global.locale.value = change.key;
|
|
routerReload();
|
|
localeChanged(change.key);
|
|
};
|
|
return {
|
|
languages,
|
|
current,
|
|
changeLocale
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.locale-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.language-item {
|
|
display: flex;
|
|
align-items: center;
|
|
.icon-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.iconify {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
</style>
|