Quellcode durchsuchen

1、切换语言页面文字没有跟着切换

qmj vor 2 Monaten
Ursprung
Commit
fe1e8b57be
2 geänderte Dateien mit 40 neuen und 23 gelöschten Zeilen
  1. 10 1
      src/composables/useI18n.js
  2. 30 22
      src/views/agent/myuser.vue

+ 10 - 1
src/composables/useI18n.js

@@ -17,7 +17,16 @@ if (typeof window !== 'undefined') {
 // 使用 i18n 的 composable
 export function useI18n() {
   return {
-    t: (key, params) => i18n.t(key, params),
+    t: (key, params) => {
+      // 访问 globalLocale.value 来建立响应式依赖
+      // 确保当 locale 变化时,使用 t() 的地方能重新计算
+      const currentLocale = globalLocale.value
+      // 同步 i18n 的 locale(确保翻译使用正确的语言)
+      if (i18n.getLocale() !== currentLocale) {
+        i18n.setLocale(currentLocale)
+      }
+      return i18n.t(key, params)
+    },
     locale: globalLocale, // 返回全局共享的 ref
     setLocale: (newLocale) => {
       i18n.setLocale(newLocale)

+ 30 - 22
src/views/agent/myuser.vue

@@ -231,13 +231,15 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import { isExternal } from '@/utils/validate'
 import { useI18n } from '@/composables/useI18n'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 
 const { proxy } = getCurrentInstance()
 const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable")
 
 // 状态选项(国际化)
 const statusOptions = computed(() => {
+  // 访问 locale.value 来建立响应式依赖,确保语言切换时重新计算
+  const currentLocale = locale.value
   if (!sys_normal_disable.value || !Array.isArray(sys_normal_disable.value)) {
     return []
   }
@@ -301,27 +303,31 @@ const queryParams = reactive({
 const form = ref({})
 
 // 表单校验
-const rules = computed(() => ({
-  username: [
-    { required: true, message: t('myuser.usernameRequired'), trigger: "blur" }
-  ],
-  nickname: [
-    { required: true, message: t('myuser.nicknameRequired'), trigger: "blur" }
-  ],
-  password: [
-    { required: true, message: t('myuser.passwordRequired'), trigger: "blur" }
-  ],
-  phone: [
-    { required: true, message: t('myuser.phoneRequired'), trigger: "blur" }
-  ],
-  status: [
-    { required: true, message: t('myuser.statusRequired'), trigger: "change" }
-  ],
-  isAgent: [
-    { required: true, message: t('myuser.agentRequired'), trigger: "change" }
-  ],
-  adminPassword: [{ required: true, message: t('myuser.adminPasswordRequired'), trigger: "blur" }],
-}))
+const rules = computed(() => {
+  // 访问 locale.value 来建立响应式依赖,确保语言切换时重新计算
+  const currentLocale = locale.value
+  return {
+    username: [
+      { required: true, message: t('myuser.usernameRequired'), trigger: "blur" }
+    ],
+    nickname: [
+      { required: true, message: t('myuser.nicknameRequired'), trigger: "blur" }
+    ],
+    password: [
+      { required: true, message: t('myuser.passwordRequired'), trigger: "blur" }
+    ],
+    phone: [
+      { required: true, message: t('myuser.phoneRequired'), trigger: "blur" }
+    ],
+    status: [
+      { required: true, message: t('myuser.statusRequired'), trigger: "change" }
+    ],
+    isAgent: [
+      { required: true, message: t('myuser.agentRequired'), trigger: "change" }
+    ],
+    adminPassword: [{ required: true, message: t('myuser.adminPasswordRequired'), trigger: "blur" }],
+  }
+})
 
 // 获取ref引用
 const queryFormRef = ref()
@@ -356,6 +362,8 @@ const getList = () => {
 }
 
 const upText = (type) => {
+  // 访问 locale.value 来建立响应式依赖,确保语言切换时重新计算
+  const currentLocale = locale.value
   switch (type) {
     case true:
       return t('myuser.uploaded')