国际化
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 贡献新的语言包!