界面多语言 plugin-i18n

约 726 字大约 2 分钟

...

2026-09-28

插件说明

界面多语言插件：基于 i18next 翻译设计器属性面板、参数 tab、右键菜单、预览条等 UI 文案。

核心能力：

通过 resources 自定义语言包，key 即语言下拉列表的显示名
属性选项渲染、tab 标题、右键菜单、预览条按钮等自动翻译
挂载 hiprint.changeLanguage / hiprint.t / hiprint.i18next / hiprint.languages 等全局 API
提供 translateBySelector 按选择器翻译任意 DOM

依赖 i18next。安装：

npm install @sv-print/plugin-i18n

示例代码

import pluginI18n, { translateBySelector } from '@sv-print/plugin-i18n';
import en from './i18n/en.json'; // 语言文件：json 数据

await hiprint.register({
  // 需 await 注册；init 不收插件数组
  plugins: [
    pluginI18n(
      {
        // lng: "英文", // 默认: "简体中文"
        // debug: true, // 调试: 可查看对应语言缺少的翻译
        resources: {
          // 自定义 key: "英文"，语言列表则显示对应的名称
          英文: {
            // key 即语言下拉显示名
            translation: en,
          },
        },
      },
      (i18next, t, err) => {
        // 初始化完成回调
        console.log('测试翻译', t('文本'));
        // 插件提供的 API：根据选择器翻译
        // translateBySelector([".sv-print"]);
      },
    ),
  ],
});

hiprint.changeLanguage('英文'); // 切换语言
// 也可使用 hiprint.i18next / hiprint.t / hiprint.languages

高级用法

config 参数

config 即 i18next 的 InitOptions，另扩展以下字段：

参数	类型	说明
resources	object	语言包；key 即语言下拉显示名，默认语言「简体中文」
lng	string	默认语言，默认 `简体中文`
debug	boolean	开启后控制台可查看对应语言缺少的翻译
optionsSelectorList	string[]	自定义属性选项的翻译选择器列表
onElementSelected	(element) => void	选中元素时回调（翻译完成后触发）
onPanelSelected	() => void	选中面板时回调
onDesigned	(designerUtils) => void	设计器创建完成后的自定义处理

第二入参为初始化完成回调：(i18next, t, err) => void。

hook 与翻译范围

hook	翻译范围
ready	挂载 `hiprint.changeLanguage` / `hiprint.t` / `hiprint.i18next` / `hiprint.languages` 等 i18n API
getOptionItem	渲染元素属性选项时翻译选项 DOM
onDesigned	翻译参数 tab 标题、header、拖拽区标题、预览条按钮、右键菜单等
onPreview	翻译预览条按钮与打印机列表文案

全局 API

API	说明
`hiprint.changeLanguage(lng, callback?)`	切换语言并刷新界面文案
`hiprint.languages`	语言列表：`["简体中文", ...resources 的 key]`
`hiprint.t(key)`	i18next 翻译函数
`hiprint.i18next`	i18next 实例
`translateBySelector(selectors)`	按选择器列表翻译指定 DOM

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)