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

3 回复

有人看吗,此问题我也遇到了,求解

更多关于uni-app i18n项目中使用picker组件完成和取消uni.picker.done uni.picker.cancel在日语、意大利语、韩语、俄语环境下失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问解决了嘛

uni-app 项目中使用 picker 组件时,uni.picker.doneuni.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. 手动设置 pickerdoneTextcancelText

如果你不希望使用 i18n 库,也可以手动设置 pickerdoneTextcancelText

<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'); // 设置语言为日语
回到顶部