94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<route lang="json">
|
||
{
|
||
"style": {
|
||
"navigationBarTitleText": "%app.name%"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="center flex-col mt-6">
|
||
<view class="text-red-500 p-4 leading-6">
|
||
经过我的测试发现，小程序里面会有2处BUG：
|
||
<view>1. 页面标题多语言不生效</view>
|
||
<view>2. 多语言传递的参数不生效，如下 heavy</view>
|
||
</view>
|
||
<view class="text-green-500">多语言测试</view>
|
||
<view class="m-4">{{ $t('app.name') }}</view>
|
||
<view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
|
||
<view class="m-4">{{ formatString(translate('weight2'), 100) }}</view>
|
||
<view class="m-4">
|
||
{{ formatStr(translate('introduction'), user) }}
|
||
</view>
|
||
|
||
<view class="text-green-500 mt-12">切换语言</view>
|
||
<view class="uni-list">
|
||
<radio-group @change="radioChange" class="radio-group">
|
||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in languages" :key="item.value">
|
||
<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 @click="testI18n" class="mt-20 mb-44">测试弹窗</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import i18n, { formatStr, formatString, translate } 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: '英文',
|
||
},
|
||
]
|
||
|
||
const radioChange = (evt) => {
|
||
// console.log(evt)
|
||
current.value = evt.detail.value
|
||
// 下面2句缺一不可！！！
|
||
uni.setLocale(evt.detail.value)
|
||
i18n.global.locale = evt.detail.value
|
||
}
|
||
</script>
|
||
|
||
<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>
|