examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat(i18n): 更新国际化组件，优化语言文件和结构，增强类型支持
All checks were successful
/ build-and-deploy-to-vercel (push) Successful in 1m16s
Details
/ depcheck (push) Successful in 1m36s
Details
/ playwright (push) Successful in 2m49s
Details

Browse Source
This commit is contained in:
严浩
2024-11-07 15:26:33 +08:00
parent 3eed9a44df
commit 6b657f3f2b
7 changed files with 57 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/i18nComp/index.vue
View File

@ -1,47 +1,47 @@
<template>
<pre>
&lt;i18n lang="json"&gt;
<i18n lang="json">
{
"en": {
"unplugin-hello": "Hello, unplugin-vue-i18n!"
},
"ja": {
"unplugin-hello": "こんにちは、unplugin-vue-i18n!"
"zh": {
"unplugin-hello": "你好，unplugin-vue-i18n！"
}
}
&lt;/i18n&gt;</pre
>
<br />
<button @click="showMessage">show messages</button>
<div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
<p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
<p><span class="label">t('message.hello'): Component1 locale messages: </span>: {{ t('message.hello') }}</p>
<p>
<span class="label">t('message.greeting'): Fallback global locale messages: </span>: {{ t('message.greeting') }}
</p>
<p><span class="label">$t('unplugin-hello')</span>: {{ $t('unplugin-hello') }}</p>
</i18n>
<select v-model="$i18n.locale">
<option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">{{ lang }}</option>
</select>
<template>
<div class="i18nComp">
<div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
<p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
<p>
<span class="label">t('unplugin-hello')</span>: {{ t('unplugin-hello') }}
<b>这个定义在i18n lang="json"的</b>
</p>
<p>
<span class="label">t('message.greeting')</span>: {{ t('message.greeting') }}
<b>这个在i18n lang="json"没有，会fallback到全局的</b>
</p>
<form>
<label for="locale">Change locale:</label>
<select id="locale" v-model="$i18n.locale">
<option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale">{{ locale }}</option>
</select>
</form>
</div>
</template>
<script lang="ts">
const messages = {
en: { message: { hello: 'hello component1' } },
ja: { message: { hello: 'こんにちは、component1' } },
};
</script>
<script setup lang="ts">
const { t } = useI18n({ messages });
function showMessage() {
alert(JSON.stringify(messages, null, 2));
}
const { t } = useI18n({
inheritLocale: true,
useScope: 'local',
});
</script>
<style scoped>
.label {
<style>
.i18nComp .label,
.i18nComp label {
color: #2c3e50;
font-weight: bold;
background-color: #f8f9fa;
@ -50,15 +50,3 @@ function showMessage() {
font-family: monospace;
}
</style>
https://vue-i18n.intlify.dev/guide/advanced/sfc.html#unplugin-vue-i18n
<i18n lang="json">
{
"en": {
"unplugin-hello": "Hello, unplugin-vue-i18n!"
},
"ja": {
"unplugin-hello": "こんにちは、unplugin-vue-i18n!"
}
}
</i18n>