Skip to content

国际化

vue-clip-track 内置了中英文语言包,同时支持自定义语言配置。

使用内置语言包

vue
<template>
  <VideoTrack :locale="locale" />
</template>

<script setup>
import { locales } from 'vue-clip-track'

// 使用中文
const locale = locales['zh-CN']

// 或使用英文
// const locale = locales['en-US']
</script>

内置语言包

中文 (zh-CN)

typescript
{
  play: '播放',
  pause: '暂停',
  undo: '撤销',
  redo: '重做',
  delete: '删除',
  reset: '重置',
  snap: '吸附',
  copy: '复制',
  cut: '剪切',
  paste: '粘贴',
  split: '分割',
  // ...更多
}

英文 (en-US)

typescript
{
  play: 'Play',
  pause: 'Pause',
  undo: 'Undo',
  redo: 'Redo',
  delete: 'Delete',
  reset: 'Reset',
  snap: 'Snap',
  copy: 'Copy',
  cut: 'Cut',
  paste: 'Paste',
  split: 'Split',
  // ...更多
}

自定义语言配置

传递自定义的语言对象:

vue
<template>
  <VideoTrack :locale="customLocale" />
</template>

<script setup>
// 完全自定义
const customLocale = {
  play: '재생',        // 韩文:播放
  pause: '일시정지',   // 韩文:暂停
  undo: '실행 취소',
  redo: '다시 실행',
  delete: '삭제',
  reset: '리셋',
  snap: '스냅',
  copy: '복사',
  cut: '잘라내기',
  paste: '붙여넣기',
}
</script>

部分覆盖

基于内置语言包进行部分覆盖:

vue
<template>
  <VideoTrack :locale="mergedLocale" />
</template>

<script setup>
import { locales } from 'vue-clip-track'

// 基于中文,覆盖部分文本
const mergedLocale = {
  ...locales['zh-CN'],
  delete: '移除',      // 自定义文本
  reset: '重新开始',
}
</script>

动态切换语言

vue
<template>
  <div>
    <select v-model="currentLang">
      <option value="zh-CN">中文</option>
      <option value="en-US">English</option>
    </select>
    
    <VideoTrack :locale="currentLocale" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { locales } from 'vue-clip-track'

const currentLang = ref('zh-CN')

const currentLocale = computed(() => locales[currentLang.value])
</script>

LocaleConfig 类型

完整的语言配置类型定义:

typescript
interface LocaleConfig {
  // 播放控制
  play: string
  pause: string
  
  // 编辑操作
  undo: string
  redo: string
  delete: string
  reset: string
  copy: string
  cut: string
  paste: string
  split: string
  
  // 功能
  snap: string
  
  // 轨道相关
  addTrack: string
  deleteTrack: string
  
  // 其他
  noClips: string
  duration: string
  
  // ...更多字段
}

添加新语言

如果需要添加新的语言支持,可以创建新的语言包文件并贡献到项目:

typescript
// locales/ja-JP.ts
export default {
  play: '再生',
  pause: '一時停止',
  undo: '元に戻す',
  redo: 'やり直す',
  delete: '削除',
  // ...
}

欢迎通过 Pull Request 贡献新的语言包!

Released under the MIT License.