Video Split Screen


Vue 3 视频分屏组件，支持多种布局、拖拽排序、响应式设计。内置完整样式，无需额外配置即可使用。

✨ 特性

- 🎯 多种布局：支持1/2/3/4/6/7/8/9/10/13/16分屏布局
- 🎨 内置样式：完整样式内置，无需额外引入CSS文件
- 🖱️ 拖拽排序：支持视频块拖拽重新排序
- 📱 响应式设计：自适应不同屏幕尺寸
- 🎭 自定义占位符：支持自定义占位符文本和样式
- 🔧 TypeScript支持：完整的类型定义
- 📦 轻量级：压缩后仅 ~25KB

📦 安装

``bash
npm install video-split-screen


或

yarn add video-split-screen

或

pnpm add video-split-screen
`

🚀 快速开始

$3

`typescript
import { createApp } from 'vue'
import App from './App.vue'
import VideoSplitScreen from 'video-split-screen'

const app = createApp(App)
app.use(VideoSplitScreen)
app.mount('#app')
`

$3

`typescript
import { VideoGridLayout } from 'video-split-screen'
`

$3

`vue



`

📋 API 参考

$3

| 参数 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| videos | VideoItem[] | - | ✅ | 视频数据数组 |
| layout | LayoutType | '1' | ❌ | 布局类型，可选值：'1'\|'2'\|'3'\|'4'\|'6'\|'7'\|'8'\|'9'\|'10'\|'13'\|'16' |
| availableLayouts | LayoutType[] | - | ❌ | 可显示的布局按钮列表，不传则显示全部 |
| showToolbar | boolean | true | ❌ | 是否显示布局切换工具栏 |
| width | string | '100%' | ❌ | 组件宽度，支持任意CSS长度值（如'100%', '800px'） |
| height | string | '100%' | ❌ | 组件高度，支持任意CSS长度值（如'70vh', '600px'） |
| placeholderText | string \| ((index: number) => string) | - | ❌ | 全局占位符文本，或返回文本的函数 |
| placeholders | Array | - | ❌ | 按索引自定义占位符，可单独修改某些格子的显示文本 |

$3

| 事件名 | 参数 | 说明 |
|--------|------|------|
| videosChange | (videos: VideoItem[]) => void | 视频列表发生变化时触发（拖拽排序后） |
| layoutChange | (layout: LayoutType) => void | 布局切换时触发 |

$3

`typescript
interface VideoItem {
id: string | number // 视频唯一标识
title?: string // 视频标题
url?: string // 视频URL
[key: string]: any // 其他自定义属性
}
`

🎨 占位符配置

组件支持灵活的占位符配置，优先级如下：

1. placeholders[index] - 最高优先级，精确控制某个位置的占位符
2. placeholderText - 中等优先级，支持字符串或函数
3. 默认编号 - 最低优先级，显示位置索引+1

$3

`vue

:videos="videos"
placeholderText="等待视频..."
/>


:videos="videos"
:placeholderText="(index) => 摄像头 ${index + 1}"
/>


:videos="videos"
:placeholders="['主摄像头', '副摄像头', '', '备份']"
placeholderText="空闲"
/>
`

🎯 支持的布局类型

| 布局 | 说明 | 视频数量 |
|------|------|----------|
| '1' | 单画面 | 1 |
| '2' | 左右分屏 | 2 |
| '3' | 上下分屏 | 2 |
| '4' | 四分屏 | 4 |
| '6' | 六分屏（2x3） | 6 |
| '7' | 七分屏（1大3小） | 4 |
| '8' | 八分屏（2x4） | 8 |
| '9' | 九分屏（3x3） | 9 |
| '10' | 十分屏（1大6小） | 7 |
| '13' | 十三分屏（1大9小） | 10 |
| '16' | 十六分屏（4x4） | 16 |

🔧 高级用法

$3

虽然组件内置了完整样式，但你也可以通过CSS变量自定义外观：

`css
.video-grid-layout {
--primary-color: #your-color;
--background-color: #your-bg;
}
`

$3

使用默认插槽自定义视频显示：

`vue



``

📄 License

MIT License - 详见 LICENSE 文件

🤝 贡献

欢迎提交 Issue 和 Pull Request！

- 🐛 报告问题
- 💡 功能建议
- 🔧 代码贡献

📞 联系我们

如有问题或建议，请通过以下方式联系：
- 📧 Email: your-email@example.com
- 🐙 GitHub: laylwenl/videoSplitScreen