国际化配置
HaierUI Plus 提供了完整的国际化支持，您可以根据需要配置不同的语言。
配置语言
全局配置
在应用初始化时，您可以通过 app.use() 方法配置全局语言：
typescript
import { createApp } from 'vue'
import App from './App.vue'
import HaierUI from 'haierui-plus'
const app = createApp(App)
app.use(HaierUI, {
locale: 'en' // 或 'zh'
})
支持的语言
zh- 中文（默认）en- 英文
自定义翻译
您可以提供自定义的翻译内容来覆盖默认翻译：
typescript
import { createApp } from 'vue'
import App from './App.vue'
import HaierUI from 'haierui-plus'
const app = createApp(App)
app.use(HaierUI, {
locale: 'zh',
messages: {
zh: {
common: {
confirm: '确认',
cancel: '取消'
}
}
}
})
动态切换语言
您可以使用 setLocale 方法动态切换语言：
typescript
import { setLocale } from 'haierui-plus'
// 切换到英文
setLocale('en')
// 切换到中文
setLocale('zh')
在组件中使用
vue
<template>
<div>
<button @click="switchLanguage">切换语言</button>
</div>
</template>
<script setup>
import { setLocale } from 'haierui-plus'
const switchLanguage = () => {
const currentLocale = localStorage.getItem('locale') || 'zh'
const newLocale = currentLocale === 'zh' ? 'en' : 'zh'
setLocale(newLocale)
localStorage.setItem('locale', newLocale)
}
</script>
扩展语言
您可以使用 addMessages 方法添加新的语言支持：
typescript
import { addMessages } from 'haierui-plus'
addMessages({
ja: {
common: {
confirm: '確認',
cancel: 'キャンセル'
}
}
})
// 然后设置为日语
setLocale('ja')
支持的组件
以下组件已支持国际化：
- HCommonTable
- HFileUpload
- HFileBatchUpload
- HFilePreview
- HSearchBar
- HFilterCondition
- HNdialog
- HDateTime
- HModuleTitle
- tableHeaderFilter
国际化键值
通用键值
| 键值 | 中文 | 英文 |
|---|---|---|
| common.selectAll | 全选 | Select All |
| common.cancel | 取消 | Cancel |
| common.confirm | 确定 | Confirm |
| common.search | 查询 | Search |
| common.add | 添加 | Add |
| common.delete | 删除 | Delete |
| common.upload | 上传 | Upload |
| common.download | 下载 | Download |
| common.preview | 预览 | Preview |
| common.edit | 编辑 | Edit |
| common.save | 保存 | Save |
| common.close | 关闭 | Close |
| common.loading | 加载中... | Loading... |
| common.noData | 暂无数据 | No Data |
| common.operation | 操作 | Operation |
| common.copy | 复制 | Copy |
| common.copySuccess | 复制成功 | Copied successfully |
| common.expand | 展开 | Expand |
| common.collapse | 收起 | Collapse |
上传组件
| 键值 | 中文 | 英文 |
|---|---|---|
| upload.uploadFile | 上传文件 | Upload File |
| upload.uploadRules | 上传规则 | Upload Rules |
| upload.uploadError | 上传失败 | Upload Failed |
| upload.fileTooLarge | 文件最大不超过{size}M | File size must not exceed {size}M |
| upload.fileFormatError | 文件仅支持上传{formats}格式 | File format only supports |
| upload.fileNameError | 文件名称不支持表情包和% | File name does not support emojis and % |
| upload.pleaseUploadFile | 请上传文件 | Please upload a file |
搜索组件
| 键值 | 中文 | 英文 |
|---|---|---|
| search.normalFilter | 普通筛选 | Normal Filter |
| search.advancedFilter | 高级筛选 | Advanced Filter |
筛选组件
| 键值 | 中文 | 英文 |
|---|---|---|
| filter.filterCondition | 筛选条件 | Filter Condition |
| filter.addFilterCondition | 添加筛选条件 | Add Filter Condition |
| filter.operators.eq | 等于(=) | Equal(=) |
| filter.operators.neq | 不等于(<>) | Not Equal(<>) |
| filter.operators.gt | 大于(>) | Greater Than(>) |
| filter.operators.lt | 小于(<) | Less Than(<) |
| filter.operators.gte | 大于等于(>=) | Greater Than or Equal(>=) |
| filter.operators.lte | 小于等于(<=) | Less Than or Equal(<=) |
| filter.operators.in | 多选(in) | In |
| filter.operators.notin | 排除(not in) | Not In |
| filter.operators.like | 模糊匹配(like) | Like |
| filter.operators.notlike | 模糊匹配排除(not like) | Not Like |
时间组件
| 键值 | 中文 | 英文 |
|---|---|---|
| dateTime.timeSelection | 时间选择 | Time Selection |
| dateTime.selectFromCalendar | 日历中选择 | Select from Calendar |
| dateTime.wholePointTime | 整点时间 | Whole Point Time |
| dateTime.wholePointTimeTip | 整点时间将为您所选时间进行抹零取整 | The whole point time will round down your selected time |
| dateTime.wholePoint | 整点 | Whole |
| dateTime.recent | 最近 | Recent |
| dateTime.day | 天 | Day(s) |
| dateTime.hour | 小时 | Hour(s) |
| dateTime.minute | 分钟 | Minute(s) |
| dateTime.second | 秒 | Second(s) |
| dateTime.history | 历史记录 | History |
| dateTime._1min | 1分钟 | 1 min |
| dateTime._5min | 5分钟 | 5 min |
| dateTime._15min | 15分钟 | 15 min |
| dateTime._30min | 30分钟 | 30 min |
| dateTime._1h | 1小时 | 1 hour |
| dateTime._4h | 4小时 | 4 hours |
| dateTime._1d | 1天 | 1 day |
| dateTime.today | 今天 | Today |
| dateTime.yesterday | 昨天 | Yesterday |
| dateTime.beforeYesterday | 前天 | Day Before Yesterday |
| dateTime._1w | 1周 | 1 week |
| dateTime.thisWeek | 本周 | This Week |
| dateTime.lastWeek | 上周 | Last Week |
| dateTime._30d | 30天 | 30 days |
| dateTime.thisMonth | 本月 | This Month |
| dateTime.lastMonth | 上月 | Last Month |
| dateTime.thisQuarter | 本季度 | This Quarter |
| dateTime.thisYear | 本年度 | This Year |
| dateTime.custom | 自定义 | Custom |
| dateTime.timeFormatError | 格式不正确，应为：YYYY-MM-DD HH:mm:ss ~ YYYY-MM-DD HH:mm:ss | Invalid format. Should be: YYYY-MM-DD HH:mm:ss ~ YYYY-MM-DD HH:mm:ss |
| dateTime.invalidDate | 包含无效的日期时间 | Contains invalid date time |
| dateTime.startTimeBeforeEndTime | 开始时间必须早于结束时间 | Start time must be earlier than end time |
| dateTime.timeFormatCorrect | 时间段格式正确 | Time range format is correct |
注意事项
- 组件内的文本默认使用中文，如果未提供翻译键值，会显示原始文本
- 建议在应用启动时统一配置语言，避免组件渲染后切换语言导致的不一致
- 自定义翻译会与默认翻译合并，相同键值的翻译会被覆盖
- 支持的语言类型为
'zh'和'en'，其他语言需要通过addMessages添加