uni-app i18n项目中使用picker组件完成和取消uni.picker.done uni.picker.cancel在日语、意大利语、韩语、俄语环境下失效
uni-app i18n项目中使用picker组件完成和取消uni.picker.done uni.picker.cancel在日语、意大利语、韩语、俄语环境下失效
测试过的手机
红米note11tpro
iphone12
操作步骤:
直接多语言设置为日语即可
预期结果:
确认取消为设置的日语
实际结果:
确认取消仍为英语
bug描述:
i18n项目中使用 picker组件 完成和取消 uni.picker.done uni.picker.cancel
在日语、意大利语、韩语、俄语环境下失效
并且这些语言的其他位置没有出现问题 只有在picker这块不行


更多关于uni-app i18n项目中使用picker组件完成和取消uni.picker.done uni.picker.cancel在日语、意大利语、韩语、俄语环境下失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
有人看吗,此问题我也遇到了,求解
更多关于uni-app i18n项目中使用picker组件完成和取消uni.picker.done uni.picker.cancel在日语、意大利语、韩语、俄语环境下失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
请问解决了嘛
在 uni-app 项目中使用 picker 组件时,uni.picker.done 和 uni.picker.cancel 的按钮文本在不同语言环境下失效,可能是因为这些按钮的文本没有正确地进行国际化处理。以下是一些解决方案:
1. 使用 i18n 库进行国际化
首先,确保你已经在项目中正确配置了 i18n 库(如 vue-i18n),并且在 picker 组件中使用了国际化文本。
安装 vue-i18n
npm install vue-i18n
配置 vue-i18n
在 src 目录下创建一个 i18n.js 文件,配置多语言支持。
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const messages = {
en: {
picker: {
done: 'Done',
cancel: 'Cancel'
}
},
ja: {
picker: {
done: '完了',
cancel: 'キャンセル'
}
},
it: {
picker: {
done: 'Fatto',
cancel: 'Annulla'
}
},
ko: {
picker: {
done: '완료',
cancel: '취소'
}
},
ru: {
picker: {
done: 'Готово',
cancel: 'Отмена'
}
}
};
const i18n = new VueI18n({
locale: 'en', // 默认语言
messages
});
export default i18n;
在 main.js 中引入 i18n
import Vue from 'vue';
import App from './App';
import i18n from './i18n';
Vue.config.productionTip = false;
new Vue({
i18n,
render: h => h(App)
}).$mount('#app');
在 picker 组件中使用国际化文本
<template>
<view>
<picker
:range="range"
@change="onChange"
:done-text="$t('picker.done')"
:cancel-text="$t('picker.cancel')"
></picker>
</view>
</template>
<script>
export default {
data() {
return {
range: ['Option 1', 'Option 2', 'Option 3']
};
},
methods: {
onChange(event) {
console.log(event.detail.value);
}
}
};
</script>
2. 手动设置 picker 的 doneText 和 cancelText
如果你不希望使用 i18n 库,也可以手动设置 picker 的 doneText 和 cancelText。
<template>
<view>
<picker
:range="range"
@change="onChange"
:done-text="doneText"
:cancel-text="cancelText"
></picker>
</view>
</template>
<script>
export default {
data() {
return {
range: ['Option 1', 'Option 2', 'Option 3'],
doneText: 'Done', // 根据语言环境动态设置
cancelText: 'Cancel' // 根据语言环境动态设置
};
},
methods: {
onChange(event) {
console.log(event.detail.value);
}
},
created() {
const lang = navigator.language || navigator.userLanguage;
if (lang.startsWith('ja')) {
this.doneText = '完了';
this.cancelText = 'キャンセル';
} else if (lang.startsWith('it')) {
this.doneText = 'Fatto';
this.cancelText = 'Annulla';
} else if (lang.startsWith('ko')) {
this.doneText = '완료';
this.cancelText = '취소';
} else if (lang.startsWith('ru')) {
this.doneText = 'Готово';
this.cancelText = 'Отмена';
}
}
};
</script>
3. 使用 uni.setLocale 动态设置语言
uni-app 提供了 uni.setLocale 方法,可以在运行时动态设置语言环境。
uni.setLocale('ja'); // 设置语言为日语

