李四
李四
  • 发布:2022-04-15 03:11
  • 更新:2023-12-15 16:55
  • 阅读:423

【红包求助】请问在vue3下国际化下steup代码中如何使用t

分类:uni-app

请问下在setup中无法使用this,这种情况下如何达到示例代码中的效果呢?

setup中如何取代this.$t('locale.auto')这种写法呢?

2022-04-15 03:11 负责人:无 分享
已邀请:
李四

李四 (作者)

求教下啊,有没有兄弟知道的,私信我红包酬谢

pure111

pure111

<template>  
  <view class="container">  
    <view class="title">{{$t('index.demo')}}</view>  
    <view class="description">{{$t('index.demo-description')}}</view>  
    <view class="detail-link">{{$t('index.detail')}}: <text  
        class="link">https://uniapp.dcloud.net.cn/collocation/i18n</text></view>  
    <view class="locale-setting">{{$t('index.language-info')}}</view>  
    <view class="list-item">  
      <text class="k">{{$t('index.system-language')}}:</text>  
      <text class="v">{{systemLocale}}</text>  
    </view>  
    <view class="list-item">  
      <text class="k">{{$t('index.application-language')}}:</text>  
      <text class="v">{{applicationLocale}}</text>  
    </view>  
    <view class="locale-setting">{{$t('index.language')}}</view>  
    <view class="locale-list">  
      <view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">  
        <text class="text">{{item.text}}</text>  
        <text class="icon-check" v-if="item.code == applicationLocale"></text>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
    import {defineComponent, getCurrentInstance,computed} from 'vue'  
    import messages from '@/locale/index'  
    import {onLoad} from "@dcloudio/uni-app"  
     import {  
        initVueI18n  
      } from '@dcloudio/uni-i18n'  
  export default {  
    data() {  
      return {  
        systemLocale: '',  
        applicationLocale: ''  
      }  
    },  
    setup(){  
        let systemInfo = uni.getSystemInfoSync();  
        let systemLocale=systemInfo.language  
        let applicationLocale=uni.getLocale();  
        let isAndroid = systemInfo.platform.toLowerCase() === 'android';  
        uni.onLocaleChange((e) => {  
          applicationLocale = e.locale;  
        })  
          const { proxy } = getCurrentInstance()  

        // locale改变方法  
        const onLocaleChange=(e)=>{  
            if (isAndroid) {  
              uni.showModal({  
                content: proxy.$t('index.language-change-confirm'),  
                success: (res) => {  
                  if (res.confirm) {  
                    uni.setLocale(e.code);  
                  }  
                }  
              })  
            } else {  
              uni.setLocale(e.code);  
              proxy.$i18n.locale = e.code;  
            }  
        }  
        let locales=computed(()=>{  
            return [{  
                text: proxy.$t('locale.auto'),  
                code: 'auto'  
              }, {  
                text: proxy.$t('locale.en'),  
                code: 'en'  
              },  
              {  
                text: proxy.$t('locale.zh-hans'),  
                code: 'zh-Hans'  
              },  
              {  
                text: proxy.$t('locale.zh-hant'),  
                code: 'zh-Hant'  
              },  
              {  
                text: proxy.$t('locale.ja'),  
                code: 'ja'  
              }  
            ]  
        })  
        return{  
            systemLocale,  
            applicationLocale,  
            isAndroid,  
            onLocaleChange,  
            locales  
        }  
    },  
  }  
</script>  

<style>  
  .title {  
    font-size: 16px;  
    font-weight: bold;  
    margin-bottom: 15px;  
  }  

  .description {  
    font-size: 14px;  
    opacity: 0.6;  
    margin-bottom: 15px;  
  }  

  .detail-link {  
    font-size: 14px;  
    word-break: break-all;  
  }  

  .link {  
    color: #007AFF;  
    margin-left: 10px;  
  }  

  .locale-setting {  
    font-size: 16px;  
    font-weight: bold;  
    margin-top: 25px;  
    margin-bottom: 5px;  
    padding-bottom: 5px;  
    border-bottom: 1px solid #f0f0f0;  
  }  

  .list-item {  
    font-size: 14px;  
    padding: 10px 0;  
  }  

  .list-item .v {  
    margin-left: 5px;  
  }  

  .locale-item {  
    display: flex;  
    flex-direction: row;  
    padding: 10px 0;  
  }  

  .locale-item .text {  
    flex: 1;  
  }  

  .icon-check {  
    margin-right: 5px;  
    border: 2px solid #007aff;  
    border-left: 0;  
    border-top: 0;  
    height: 12px;  
    width: 6px;  
    transform-origin: center;  
    /* #ifndef APP-NVUE */  
    transition: all 0.3s;  
    /* #endif */  
    transform: rotate(45deg);  
  }  
</style>  
pure111

pure111

以上思路是:
因为vue3中setup函数内部,this不会是该活跃实例引用,(即在里面打印this,很大概率是undefined)

然后我用了getCurrentInstance方法,去引用里面的proxy再去调用,不知道还有没有什么问题,你试试看可不可以

  • 小小菜76055421

    getCurrentInstance获取全局变量或全局方法时可以,但用于这个封装的国际化函数 $t(),报proxy.$t is not a function,不晓得啥原因

    2022-08-24 10:52

9***@qq.com

9***@qq.com

<template>  
  <div>  
    <p>{{ t('hello') }}</p>  
    <p>{{ t('welcome') }}</p>  
  </div>  
</template>  
<script setup>  
import { useI18n } from 'vue-i18n';  

const { t } = useI18n();  
</script>

要回复问题请先登录注册