国际化

Vue Lite Layer 内置了国际化支持，默认提供中文（zh-CN）和英文（en）两种语言。

内置语言

中文 (zh-CN) — 默认

键名	文本
VueLiteLayer.close	关闭
VueLiteLayer.maximum	最大化
VueLiteLayer.restore	还原
VueLiteLayer.minimum	最小化
VueLiteLayer.loading	加载中
VueLiteLayer.ok	确认
VueLiteLayer.cancel	取消

英文 (en)

键名	文本
VueLiteLayer.close	close
VueLiteLayer.maximum	maximum
VueLiteLayer.restore	restore
VueLiteLayer.minimum	minimum
VueLiteLayer.loading	loading
VueLiteLayer.ok	ok
VueLiteLayer.cancel	cancel

切换语言

全局设置

在注册插件时通过 i18n 选项设置默认语言：

import { createApp } from 'vue'
import VueLiteLayer from 'vue-lite-layer'

const app = createApp(App)
app.use(VueLiteLayer, {
  i18n: { locale: 'en' }
})

单个弹层设置

可以为单个弹层指定不同的语言：

const { openLayer } = useLiteLayer()

openLayer({
  title: 'English Layer',
  content: MyComponent,
  i18n: { locale: 'en' }
}, appContext)

自定义语言包

可以通过 i18n.messages 扩展或覆盖语言文本：

覆盖内置文本

app.use(VueLiteLayer, {
  i18n: {
    locale: 'zh-CN',
    messages: {
      'zh-CN': {
        VueLiteLayer: {
          ok: '提交',
          cancel: '返回',
          close: '关闭窗口',
          loading: '请稍候...',
        }
      }
    }
  }
})

添加新语言

app.use(VueLiteLayer, {
  i18n: {
    locale: 'ja',
    messages: {
      ja: {
        VueLiteLayer: {
          close: '閉じる',
          maximum: '最大化',
          restore: '復元',
          minimum: '最小化',
          loading: '読み込み中',
          ok: '確認',
          cancel: 'キャンセル'
        }
      }
    }
  }
})

Nuxt 中使用

在 nuxt.config.ts 中配置国际化：

export default defineNuxtConfig({
  modules: ['vue-lite-layer/nuxt'],
  vueLiteLayer: {
    i18n: {
      locale: 'en',
      messages: {
        en: {
          VueLiteLayer: {
            ok: 'Confirm',
            cancel: 'Cancel',
          }
        }
      }
    }
  }
})

技术实现

Vue Lite Layer 使用 vue-i18n-lite 作为国际化引擎。每个弹层实例创建时会独立初始化 i18n 实例，语言包的合并优先级为：

1. openLayer() 传入的 i18n.messages
2. app.use() 注册时传入的 i18n.messages
3. 内置语言包（zh-CN / en）

第三方组件（Element Plus）说明

通过 useLiteLayer().openLayer() 打开时，Layer 会自动继承调用组件所在树的 provide。因此，只要调用点位于祖先 <ElConfigProvider :locale="..."> 内，Layer 中的 Element Plus 组件（包括 DatePicker）会默认使用同一份 locale，并跟随其响应式变化；无需额外给 lite-layer 或 Layer 内容组件配置语言。

直接调用 $layer.open() 时，只能继承所传 appContext 的应用级 provide。若 locale 来自组件级 ElConfigProvider，请在该组件树中使用 useLiteLayer().openLayer() 打开窗口。

如果业务代码单独设置了 Day.js 的全局语言，仍需自行调用 dayjs.locale(...) 同步。