通过h+render实现的组件国际化问题

47 阅读1分钟
// 组件注册import { h, render } from 'vue'import Relogin from './Relogin.vue';/** * @param {*} title 标题 */export const relogin = (title: string) => {  return new Promise((resolve, reject) => {    // 不传入标题,只传入内容时    if (title) {      title = '默认标题'    }    // 关闭弹层事件    const close = () => {      render(null, document.body)      resolve(1)    }        // 1. 生成 vnode    const vnode = h(Relogin, {      title,      close    })    // 2. render 渲染    render(vnode, document.body)  })}

// 组件实现
<template>  <div class="w-sm flex flex-col">    <span>{{ title }}</span>    <SvgIcon class="pl-8" name="workday" height="120px" width="120px"></SvgIcon>    <div class="flex flex-col p8 pb-5">      <span class="mb-2">{{ $t("login.username") }}:</span>      <el-input class="mb-3" v-model="loginForm.username" auto-complete="off" :prefix-icon="User"></el-input>      <span class="mb-2">{{ $t("login.password") }}:</span>      <el-input auto-complete="off" type="password" show-password :prefix-icon="Key" @keydown.enter.native="Login" v-model="loginForm.password">      </el-input>    </div>    <div class="flex flex-center h-15 pl8 pr8">      <el-checkbox class="flex-1">{{ $t("login.autologin") }}</el-checkbox>      <el-button class="w-20" type="primary" :loading="loging" round @click="Login">{{ $t("login.submittext") }}</el-button>    </div>  </div></template><script setup lang="ts">import { ref } from 'vue'import { login, LoginReqForm } from '@/api/login.js'import SvgIcon from "@/components/common/Icon/SvgIcon.vue"import { Key, User } from '@element-plus/icons-vue'import { useLocalStorage } from '@vueuse/core'// import { useI18n } from "vue-i18n"// const { locale, t } = useI18n()// console.log(useI18n)const emit = defineEmits(['click'])const props = defineProps({  title:{    type: String,    required: true  },  close: {    type: Function,    required: true  }})const loging = ref(false)const loginForm = ref<LoginReqForm>({  username: "superadmin",  password: '123456'})const Login = async () => {  loging.value = true  login(loginForm.value).then((data) => {    console.log(data.result.token)    ElMessage.success('登录成功')    let token = useLocalStorage('token', '')    token.value = data.result.token    loging.value = false    props.close()  }).catch((err) => {    loging.value = false    console.log("e:" + err)  })}</script><style>  .message {    position: fixed;    z-index: 88888;    top: 0;    color: black;    left: 50%;    height: 40px;    line-height: 40px;    top: 80px;    transform: translate(-50%);    padding: 12px;    background-color: white;    border: 1px solid rgba(0, 0, 0, 0.1);    display: flex;    align-items: center;    animation: downed 100ms ease;    border-radius: 4px;    box-sizing: border-box;  }  @keyframes downed {    0% {      top: 60px;    }    100% {      top: 80px;    }  }  .text {    margin-left: 5px;    max-width: 400px;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;  }</style>

问题:

1、提示如下错误信息:

Relogin.vue:6 Uncaught (in promise) TypeError: _ctx.$t is not a function
    at Proxy._sfc_render (Relogin.vue:6:29)
    at renderComponentRoot (chunk-5UCCR277.js?v=5a4ecc53:2224:17)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-5UCCR277.js?v=5a4ecc53:7099:46)
    at ReactiveEffect.run (chunk-5UCCR277.js?v=5a4ecc53:423:19)
    at instance.update (chunk-5UCCR277.js?v=5a4ecc53:7212:52)
    at setupRenderEffect (chunk-5UCCR277.js?v=5a4ecc53:7220:5)
    at mountComponent (chunk-5UCCR277.js?v=5a4ecc53:7010:5)
    at processComponent (chunk-5UCCR277.js?v=5a4ecc53:6963:9)
    at patch (chunk-5UCCR277.js?v=5a4ecc53:6436:11)
    at Object.render2 [as render] (chunk-5UCCR277.js?v=5a4ecc53:7730:7)

2、通过显示引入后仍然提示错误:

vue-i18n.js?v=5a4ecc53:4779 Uncaught (in promise) TypeError: Cannot read properties of null (reading '__VUE_I18N_SYMBOL__')
    at getI18nInstance (vue-i18n.js?v=5a4ecc53:4779:66)
    at useI18n (vue-i18n.js?v=5a4ecc53:4719:16)
    at setup (Relogin.vue:26:23)
    at callWithErrorHandling (chunk-5UCCR277.js?v=5a4ecc53:1565:18)
    at setupStatefulComponent (chunk-5UCCR277.js?v=5a4ecc53:8631:25)
    at setupComponent (chunk-5UCCR277.js?v=5a4ecc53:8592:36)
    at mountComponent (chunk-5UCCR277.js?v=5a4ecc53:6997:7)
    at processComponent (chunk-5UCCR277.js?v=5a4ecc53:6963:9)
    at patch (chunk-5UCCR277.js?v=5a4ecc53:6436:11)
    at Object.render2 [as render] (chunk-5UCCR277.js?v=5a4ecc53:7730:7)