// 组件注册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)
