国际化支持

TinySearchBox 组件库内置了国际化（i18n）支持，可以自动适配父级项目的国际化配置，也支持使用组件库内置的语言包。

支持的语言

组件库内置支持以下语言：

• zh-CN - 简体中文（默认）
• en-US - 英文

i18n 自动继承

组件在 app.use(TinySearchBox) 时会自动继承宿主应用的 i18n 实例，通常不需要手动调用 setGlobalApp。组件会优先使用父级项目的 i18n 配置，如果父级项目已配置相同的键值，则使用父级项目的翻译；否则使用组件库内置的默认翻译。

使用方式

Vue 3 项目

在 Vue 3 项目中，组件库会自动检测并使用项目的 i18n 配置：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import TinySearchBox, { zhCN, enUS } from '@opentiny/vue-search-box'

// 创建 i18n 实例
const i18n = createI18n({
  legacy: false,  // 使用 Composition API 模式
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

const app = createApp(App)

// 使用 i18n
app.use(i18n)

// 使用 TinySearchBox（会自动继承 app 的 i18n 实例）
app.use(TinySearchBox)

app.mount('#app')

注意：setGlobalApp(app) 已不再是必需步骤。组件在 install 时会自动捕获宿主应用的 i18n 实例。仅在特殊场景下（如未通过 app.use 安装组件）才需要手动调用。

Vue 2 项目

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import TinySearchBox, { zhCN, enUS } from '@opentiny/vue-search-box'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

// 使用 TinySearchBox（会自动通过 mixin 捕获 i18n 实例）
Vue.use(TinySearchBox)

const app = new Vue({
  i18n,
  render: (h) => h(App)
})

app.$mount('#app')

注意：Vue2 环境下，组件通过 mixin + beforeCreate 钩子自动捕获 i18n 实例，通常不需要手动调用 setGlobalApp({ $i18n: i18n })。

语言切换

组件库会自动响应父级项目的语言切换。当你在项目中切换语言时，组件库的文本也会自动更新：

// Vue 3
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
locale.value = 'en-US' // 切换语言

// Vue 2
this.$i18n.locale = 'en-US' // 切换语言

自定义语言包

组件库内置 zh-CN 和 en-US 两种语言。如果需要添加其他语言，可以在项目的 i18n messages 中直接添加对应的键值：

import { zhCN, enUS } from '@opentiny/vue-search-box'

const i18n = createI18n({
  locale: 'zh-TW',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
    'zh-TW': {
      tvp: {
        tvpSearchbox: {
          defaultPlaceholder: '請選擇屬性篩選，或輸入關鍵字',
          addPlaceholder: '添加篩選條件',
          // ... 其他翻译
        }
      }
    }
  }
})

内置语言包键值

组件库使用以下命名空间和键值：

• 命名空间：tvp.tvpSearchbox
• 主要键值：
  • defaultPlaceholder - 默认占位符
  • addPlaceholder - 添加筛选条件占位符
  • tagPlaceholder - 标签占位符
  • matched - 潜在匹配项
  • allValues - 所有值
  • allProperty - 全部属性
  • clearAll - 清空
  • confirm - 确定
  • cancel - 取消
  • selectAll - 全选
  • help - 帮助提示
  • 等等...

完整的键值列表请参考组件库源码中的 zh_CN.ts 和 en_US.ts 文件。

注意事项

1. 自动继承：组件通过 app.use 安装时会自动继承 i18n 实例，通常无需手动调用 setGlobalApp
2. 语言包优先级：父级项目的 i18n 配置优先于组件库内置语言包
3. 实时更新：组件库会自动监听语言变化，无需手动刷新组件