forked from dengzhifeng/ufutx-pc-website
129 lines
3.1 KiB
Vue
129 lines
3.1 KiB
Vue
<template>
|
|
<div class="i18n-demo">
|
|
<!-- 语言切换按钮 -->
|
|
<div class="language-selector">
|
|
<button
|
|
v-for="lang in availableLanguages"
|
|
:key="lang"
|
|
:class="{ active: currentLocale === lang }"
|
|
@click="switchLocale(lang)"
|
|
>
|
|
{{ lang === 'en' ? 'English' : '简体中文' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 页面内容 -->
|
|
<h1>{{ t('page.title') }}</h1>
|
|
<!-- 日期格式化示例 -->
|
|
<div class="date-demo">
|
|
<h3>{{ t('demo.date.title') }}</h3>
|
|
<!-- 使用 t 函数格式化日期 -->
|
|
<p>{{ t('demo.date.current', { now: new Date() }) }}</p>
|
|
|
|
<p>{{ t('demo.date.current', { now: nowFormatted }) }}</p>
|
|
</div>
|
|
|
|
<!-- 数字格式化示例 -->
|
|
<div class="number-demo">
|
|
<h3>{{ t('demo.number.title') }}</h3>
|
|
<!-- 使用 t 函数格式化数字 -->
|
|
<p>{{ t('demo.number.price', { amount: 12345.67 }) }}</p>
|
|
</div>
|
|
|
|
<!-- 复数示例 -->
|
|
<div class="plural-demo">
|
|
<h3>{{ t('demo.plural.title') }}</h3>
|
|
<span>你好</span>
|
|
<!-- {{ t('demo.plural.message', 12) }}-->
|
|
<!-- <p v-for="count in [0, 1, 2, 5]" :key="count">-->
|
|
<!-- {{ t('demo.plural.message', { count }) }}-->
|
|
<!-- </p>-->
|
|
</div>
|
|
|
|
<!-- 嵌套翻译示例 -->
|
|
<div class="nested-demo">
|
|
<h3>{{ t('demo.nested.title') }}</h3>
|
|
<p>{{ t('demo.nested.content') }}</p>
|
|
</div>
|
|
|
|
<!-- 路由链接示例 -->
|
|
<div class="router-demo">
|
|
<h3>{{ t('demo.router.title') }}</h3>
|
|
<router-link to="/">{{ t('demo.router.home') }}</router-link>
|
|
<router-link to="/about">{{ t('demo.router.about') }}</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import { ref, computed, onMounted } from 'vue' // 添加缺失的导入
|
|
|
|
// 使用 i18n 组合式 API
|
|
const { t, locale, d } = useI18n()
|
|
|
|
const nowFormatted = d(new Date(), 'short')
|
|
|
|
// 可用语言列表
|
|
const availableLanguages = ref(['en', 'zh-CN'])
|
|
|
|
// 切换语言
|
|
const switchLocale = (newLocale: string) => {
|
|
locale.value = newLocale
|
|
console.log(newLocale)
|
|
console.log(t)
|
|
// 可选：保存用户偏好到本地存储
|
|
localStorage.setItem('app-locale', newLocale)
|
|
}
|
|
|
|
// 获取当前语言
|
|
const currentLocale = computed(() => locale.value)
|
|
|
|
// 页面加载时尝试恢复用户上次选择的语言
|
|
onMounted(() => {
|
|
const savedLocale = localStorage.getItem('app-locale')
|
|
if (savedLocale && availableLanguages.value.includes(savedLocale)) {
|
|
locale.value = savedLocale
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.i18n-demo {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.language-selector {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: #f0f0f0;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button.active {
|
|
background-color: #42b983;
|
|
color: white;
|
|
}
|
|
|
|
div > h3 {
|
|
margin-top: 30px;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.router-demo a {
|
|
margin-right: 15px;
|
|
color: #42b983;
|
|
}
|
|
</style>
|