49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { useIonRouter } from "@ionic/vue";
|
|
|
|
const { t } = useI18n();
|
|
const router = useIonRouter();
|
|
const { languages, locale, setLanguage } = useLanguage();
|
|
|
|
function handleLanguageChange(event: CustomEvent) {
|
|
const langCode = event.detail.value;
|
|
setLanguage(langCode);
|
|
|
|
// 返回上一页
|
|
setTimeout(() => {
|
|
router.back();
|
|
}, 300);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar class="ui-toolbar">
|
|
<ui-back-button slot="start" />
|
|
<ion-title>{{ t("settings.languageTitle") }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content :fullscreen="true" class="ion-padding">
|
|
<ion-list lines="full">
|
|
<ion-radio-group :value="locale" @ion-change="handleLanguageChange">
|
|
<ion-item v-for="lang in languages" :key="lang.code">
|
|
<ion-radio :value="lang.code">
|
|
<div class="language-item">
|
|
<div class="font-semibold">
|
|
{{ lang.nativeName }}
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
{{ lang.name }}
|
|
</div>
|
|
</div>
|
|
</ion-radio>
|
|
</ion-item>
|
|
</ion-radio-group>
|
|
</ion-list>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style lang='css' scoped></style>
|