zhangrenyuan
4 days ago
11 changed files with 301 additions and 12 deletions
-
82package-lock.json
-
1package.json
-
29src/App.vue
-
118src/components/dialogs/LanguageSwitch.vue
-
28src/components/locales/index.js
-
10src/components/locales/lang/en.js
-
10src/components/locales/lang/th.js
-
10src/components/locales/lang/zh-CN.js
-
3src/main.ts
-
3src/views/audit/gold/audit.vue
-
17src/views/home.vue
@ -1,9 +1,26 @@ |
|||
<script setup> |
|||
</script> |
|||
|
|||
<template> |
|||
<router-view></router-view> |
|||
<el-config-provider :locale="elLocale"> |
|||
<router-view /> |
|||
</el-config-provider> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
<script setup> |
|||
import { computed } from 'vue' |
|||
import { useI18n } from 'vue-i18n' |
|||
// 引入 Element Plus 的语言包 |
|||
import zhCnLocale from 'element-plus/dist/locale/zh-cn.mjs' |
|||
import enLocale from 'element-plus/dist/locale/en.mjs' |
|||
import thLocale from 'element-plus/dist/locale/th.mjs' |
|||
|
|||
const { locale } = useI18n() |
|||
|
|||
// 计算属性：根据当前 i18n 的语言，返回对应的 Element Plus 语言包 |
|||
const elLocale = computed(() => { |
|||
switch (locale.value) { |
|||
case 'zh-CN': return zhCnLocale |
|||
case 'en': return enLocale |
|||
case 'th': return thLocale |
|||
default: return zhCnLocale |
|||
} |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="语言切换" |
|||
width="300px" |
|||
:close-on-click-modal="false" |
|||
append-to-body |
|||
> |
|||
<el-form label-width="80px"> |
|||
<el-form-item label="当前语言"> |
|||
<el-input |
|||
:model-value="getLangLabel(currentLang)" |
|||
disabled |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="切换语言"> |
|||
<el-select |
|||
v-model="tempLang" |
|||
placeholder="请选择语言" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="item in langOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="handleConfirm">确 定</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
import { useI18n } from 'vue-i18n' |
|||
// === 关键修复：显式引入所有用到的 Element Plus 组件 === |
|||
import { |
|||
ElDialog, |
|||
ElForm, |
|||
ElFormItem, |
|||
ElInput, |
|||
ElSelect, |
|||
ElOption, |
|||
ElButton, |
|||
ElMessage |
|||
} from 'element-plus' |
|||
|
|||
// 如果你的项目样式也没有自动引入，可能还需要引入样式文件（视项目配置而定） |
|||
// import 'element-plus/es/components/dialog/style/css' |
|||
// import 'element-plus/es/components/form/style/css' |
|||
// ... 通常现在的脚手架只需要引入上面的组件即可 |
|||
|
|||
const { locale } = useI18n() |
|||
|
|||
// 控制弹窗显示 |
|||
const dialogVisible = ref(false) |
|||
|
|||
// 真正的当前语言 |
|||
const currentLang = computed(() => locale.value) |
|||
|
|||
// 临时选择的语言 |
|||
const tempLang = ref('') |
|||
|
|||
// 语言选项 |
|||
const langOptions = [ |
|||
{ label: '中文(简体)', value: 'zh-CN' }, |
|||
{ label: '中文(繁体)', value: 'zh-TW' }, |
|||
{ label: '英语', value: 'en' }, |
|||
{ label: '泰语', value: 'th' }, |
|||
{ label: '越南语', value: 'vi' } |
|||
] |
|||
|
|||
// 获取语言显示名称 |
|||
const getLangLabel = (langCode) => { |
|||
const find = langOptions.find(item => item.value === langCode) |
|||
return find ? find.label : langCode |
|||
} |
|||
|
|||
// 打开弹窗 |
|||
const open = () => { |
|||
tempLang.value = currentLang.value |
|||
dialogVisible.value = true |
|||
} |
|||
|
|||
// 确认修改 |
|||
const handleConfirm = () => { |
|||
locale.value = tempLang.value |
|||
localStorage.setItem('language', tempLang.value) |
|||
ElMessage.success(`语言已切换为：${getLangLabel(tempLang.value)}`) |
|||
dialogVisible.value = false |
|||
} |
|||
|
|||
defineExpose({ |
|||
open |
|||
}) |
|||
</script> |
|||
|
|||
<!-- 去掉scoped，全局生效 --> |
|||
<style > |
|||
.el-dialog__body { |
|||
height: 500px !important; |
|||
overflow-y: auto; |
|||
} |
|||
.dialog-footer { |
|||
display: flex; |
|||
justify-content: center; |
|||
gap: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,28 @@ |
|||
import { createI18n } from 'vue-i18n' |
|||
|
|||
// 引入你的本地语言包
|
|||
import zhCN from './lang/zh-CN' |
|||
import en from './lang/en' |
|||
import th from './lang/th' // 泰文
|
|||
|
|||
// 组合语言包
|
|||
const messages = { |
|||
'zh-CN': zhCN, |
|||
'en': en, |
|||
'th': th |
|||
} |
|||
|
|||
// 获取浏览器默认语言或缓存语言
|
|||
const getLocale = () => { |
|||
// 优先读取缓存，没有则读取浏览器语言，默认 zh-CN
|
|||
return localStorage.getItem('language') || 'zh-CN' |
|||
} |
|||
|
|||
const i18n = createI18n({ |
|||
legacy: false, // Vue 3 组合式 API 必须设置为 false
|
|||
globalInjection: true, // 全局注入 $t 函数
|
|||
locale: getLocale(), // 初始化语言
|
|||
messages // 语言包数据
|
|||
}) |
|||
|
|||
export default i18n |
|||
@ -0,0 +1,10 @@ |
|||
export default { |
|||
common: { |
|||
confirm: 'Confirm', |
|||
cancel: 'Cancel' |
|||
}, |
|||
audit: { |
|||
rechargeAudit: 'Recharge Audit', |
|||
status: 'Status' |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
export default { |
|||
common: { |
|||
confirm: 'ยืนยัน', |
|||
cancel: 'ยกเลิก' |
|||
}, |
|||
audit: { |
|||
rechargeAudit: 'การตรวจสอบการเติมเงิน', |
|||
status: 'สถานะ' |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
export default { |
|||
common: { |
|||
confirm: '确定', |
|||
cancel: '取消' |
|||
}, |
|||
audit: { |
|||
rechargeAudit: '充值审核', // 你的需求字段
|
|||
status: '状态' |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue