129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
<route lang="json">
|
||
{
|
||
"style": {
|
||
"navigationBarTitleText": "%app.name%"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<script lang="ts" setup>
|
||
import i18n, { t } from '@/locale/index'
|
||
import { testI18n } from '@/utils/i18n'
|
||
|
||
const current = ref(uni.getLocale())
|
||
const user = { name: '张三', detail: { height: 178, weight: '75kg' } }
|
||
const languages = [
|
||
{
|
||
value: 'zh-Hans',
|
||
name: '中文',
|
||
checked: 'true',
|
||
},
|
||
{
|
||
value: 'en',
|
||
name: '英文',
|
||
},
|
||
]
|
||
|
||
function radioChange(evt) {
|
||
// console.log(evt)
|
||
current.value = evt.detail.value
|
||
// 下面2句缺一不可！！！
|
||
uni.setLocale(evt.detail.value)
|
||
i18n.global.locale = evt.detail.value
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="mt-6 center flex-col">
|
||
<view class="p-4 text-red-500 leading-6">
|
||
经过我的测试发现，小程序里面会有2处BUG：
|
||
<view>
|
||
<text class="line-through">
|
||
1. 页面标题多语言不生效
|
||
</text>
|
||
<text class="ml-2 text-green-500">
|
||
已解决
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text class="line-through">
|
||
2. 多语言传递的参数不生效，如下 heavy
|
||
</text>
|
||
<text class="ml-2 text-green-500">
|
||
已解决
|
||
</text>
|
||
<view class="ml-2 text-green-500">
|
||
把 $t 改为自定义的 t 即可
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-green-500">
|
||
多语言测试
|
||
</view>
|
||
<view class="m-4">
|
||
{{ $t('app.name') }}
|
||
</view>
|
||
<view class="text-gray-500 italic">
|
||
使用$t: {{ $t('weight', { heavy: 100 }) }}
|
||
</view>
|
||
<view class="m-4">
|
||
{{ $t('weight', { heavy: 100 }) }}
|
||
</view>
|
||
<view class="text-gray-500 italic">
|
||
使用t: {{ t('weight', { heavy: 100 }) }}
|
||
</view>
|
||
<view class="m-4">
|
||
{{ t('weight', { heavy: 100 }) }}
|
||
</view>
|
||
<view class="m-4">
|
||
{{ t('introduction', user) }}
|
||
</view>
|
||
|
||
<view class="mt-12 text-green-500">
|
||
切换语言
|
||
</view>
|
||
<view class="uni-list">
|
||
<radio-group class="radio-group" @change="radioChange">
|
||
<label v-for="item in languages" :key="item.value" class="uni-list-cell uni-list-cell-pd">
|
||
<view>
|
||
<radio :value="item.value" :checked="item.value === current" />
|
||
</view>
|
||
<view>{{ item.name }}</view>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
|
||
<!-- http://localhost:9000/#/pages/index/i18n -->
|
||
<button class="mb-44 mt-20" @click="testI18n">
|
||
测试弹窗
|
||
</button>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.uni-list {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.radio-group {
|
||
width: 200px;
|
||
margin: 10px auto;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.uni-list-cell {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
background-color: #bcecd1;
|
||
}
|
||
</style>
|