video-split-screen 1.0.19 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +152 -60
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,35 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Video Split Screen
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/video-split-screen)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
Vue 3 视频分屏组件，支持多种布局、拖拽排序、响应式设计。内置完整样式，无需额外配置即可使用。
|
|
7
|
+
|
|
8
|
+
## ✨ 特性
|
|
9
|
+
|
|
10
|
+
- 🎯 **多种布局**：支持1/2/3/4/6/7/8/9/10/13/16分屏布局
|
|
11
|
+
- 🎨 **内置样式**：完整样式内置，无需额外引入CSS文件
|
|
12
|
+
- 🖱️ **拖拽排序**：支持视频块拖拽重新排序
|
|
13
|
+
- 📱 **响应式设计**：自适应不同屏幕尺寸
|
|
14
|
+
- 🎭 **自定义占位符**：支持自定义占位符文本和样式
|
|
15
|
+
- 🔧 **TypeScript支持**：完整的类型定义
|
|
16
|
+
- 📦 **轻量级**：压缩后仅 ~25KB
|
|
17
|
+
|
|
18
|
+
## 📦 安装
|
|
6
19
|
|
|
7
20
|
```bash
|
|
8
21
|
npm install video-split-screen
|
|
9
|
-
#
|
|
22
|
+
# 或
|
|
10
23
|
yarn add video-split-screen
|
|
24
|
+
# 或
|
|
25
|
+
pnpm add video-split-screen
|
|
11
26
|
```
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
## 🚀 快速开始
|
|
29
|
+
|
|
30
|
+
### 全局注册
|
|
14
31
|
|
|
15
|
-
```
|
|
32
|
+
```typescript
|
|
16
33
|
import { createApp } from 'vue'
|
|
17
34
|
import App from './App.vue'
|
|
18
35
|
import VideoSplitScreen from 'video-split-screen'
|
|
@@ -22,86 +39,161 @@ app.use(VideoSplitScreen)
|
|
|
22
39
|
app.mount('#app')
|
|
23
40
|
```
|
|
24
41
|
|
|
25
|
-
|
|
42
|
+
### 按需导入
|
|
26
43
|
|
|
27
|
-
```
|
|
44
|
+
```typescript
|
|
28
45
|
import { VideoGridLayout } from 'video-split-screen'
|
|
29
46
|
```
|
|
30
47
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
包内置一份默认样式，构建时会产出 `dist/style.css`。如果你全局注册插件（`app.use(...)`）示例项目会自动引入样式；也可以按需手动引入：
|
|
34
|
-
|
|
35
|
-
```ts
|
|
36
|
-
import 'video-split-screen/dist/style.css'
|
|
37
|
-
```
|
|
48
|
+
### 基础用法
|
|
38
49
|
|
|
39
|
-
|
|
50
|
+
```vue
|
|
51
|
+
<template>
|
|
52
|
+
<VideoGridLayout
|
|
53
|
+
:videos="videoList"
|
|
54
|
+
layout="4"
|
|
55
|
+
@videosChange="handleVideosChange"
|
|
56
|
+
/>
|
|
57
|
+
</template>
|
|
40
58
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
- `showToolbar?: boolean` — 是否显示工具栏，默认 `true`
|
|
45
|
-
- `width?: string` — 宽度（任意 CSS 长度，例如 `100%`, `800px`）
|
|
46
|
-
- `height?: string` — 高度（任意 CSS 长度，例如 `70vh`, `600px`）
|
|
47
|
-
- `placeholderText?: string | (index: number) => string` — 全局占位文本或按索引生成文本的函数
|
|
48
|
-
- `placeholders?: Array<string|number>` — 按索引覆盖占位符（可单独修改某些格子）
|
|
59
|
+
<script setup lang="ts">
|
|
60
|
+
import { ref } from 'vue'
|
|
61
|
+
import { VideoGridLayout } from 'video-split-screen'
|
|
49
62
|
|
|
50
|
-
|
|
63
|
+
const videoList = ref([
|
|
64
|
+
{ id: 1, title: 'Camera 1', url: 'rtmp://...' },
|
|
65
|
+
{ id: 2, title: 'Camera 2', url: 'rtmp://...' },
|
|
66
|
+
{ id: 3, title: 'Camera 3', url: 'rtmp://...' },
|
|
67
|
+
{ id: 4, title: 'Camera 4', url: 'rtmp://...' }
|
|
68
|
+
])
|
|
69
|
+
|
|
70
|
+
const handleVideosChange = (videos) => {
|
|
71
|
+
videoList.value = videos
|
|
72
|
+
}
|
|
73
|
+
</script>
|
|
74
|
+
```
|
|
51
75
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
76
|
+
## 📋 API 参考
|
|
77
|
+
|
|
78
|
+
### VideoGridLayout Props
|
|
79
|
+
|
|
80
|
+
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|
|
81
|
+
|------|------|--------|------|------|
|
|
82
|
+
| `videos` | `VideoItem[]` | - | ✅ | 视频数据数组 |
|
|
83
|
+
| `layout` | `LayoutType` | `'1'` | ❌ | 布局类型，可选值：`'1'\|'2'\|'3'\|'4'\|'6'\|'7'\|'8'\|'9'\|'10'\|'13'\|'16'` |
|
|
84
|
+
| `availableLayouts` | `LayoutType[]` | - | ❌ | 可显示的布局按钮列表，不传则显示全部 |
|
|
85
|
+
| `showToolbar` | `boolean` | `true` | ❌ | 是否显示布局切换工具栏 |
|
|
86
|
+
| `width` | `string` | `'100%'` | ❌ | 组件宽度，支持任意CSS长度值（如`'100%'`, `'800px'`） |
|
|
87
|
+
| `height` | `string` | `'100%'` | ❌ | 组件高度，支持任意CSS长度值（如`'70vh'`, `'600px'`） |
|
|
88
|
+
| `placeholderText` | `string \| ((index: number) => string)` | - | ❌ | 全局占位符文本，或返回文本的函数 |
|
|
89
|
+
| `placeholders` | `Array<string \| number>` | - | ❌ | 按索引自定义占位符，可单独修改某些格子的显示文本 |
|
|
90
|
+
|
|
91
|
+
### VideoGridLayout Events
|
|
92
|
+
|
|
93
|
+
| 事件名 | 参数 | 说明 |
|
|
94
|
+
|--------|------|------|
|
|
95
|
+
| `videosChange` | `(videos: VideoItem[]) => void` | 视频列表发生变化时触发（拖拽排序后） |
|
|
96
|
+
| `layoutChange` | `(layout: LayoutType) => void` | 布局切换时触发 |
|
|
97
|
+
|
|
98
|
+
### VideoItem 类型定义
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
interface VideoItem {
|
|
102
|
+
id: string | number // 视频唯一标识
|
|
103
|
+
title?: string // 视频标题
|
|
104
|
+
url?: string // 视频URL
|
|
105
|
+
[key: string]: any // 其他自定义属性
|
|
106
|
+
}
|
|
107
|
+
```
|
|
56
108
|
|
|
57
|
-
##
|
|
109
|
+
## 🎨 占位符配置
|
|
58
110
|
|
|
59
|
-
|
|
111
|
+
组件支持灵活的占位符配置，优先级如下：
|
|
60
112
|
|
|
61
|
-
|
|
113
|
+
1. **`placeholders[index]`** - 最高优先级，精确控制某个位置的占位符
|
|
114
|
+
2. **`placeholderText`** - 中等优先级，支持字符串或函数
|
|
115
|
+
3. **默认编号** - 最低优先级，显示位置索引+1
|
|
62
116
|
|
|
63
|
-
|
|
64
|
-
- ⚡ **热重载** - 修改组件代码后自动更新示例
|
|
65
|
-
- 🎯 **完整功能演示** - 涵盖所有组件特性和使用场景
|
|
117
|
+
### 示例
|
|
66
118
|
|
|
67
|
-
|
|
119
|
+
```vue
|
|
120
|
+
<!-- 自定义占位符文本 -->
|
|
121
|
+
<VideoGridLayout
|
|
122
|
+
:videos="videos"
|
|
123
|
+
placeholderText="等待视频..."
|
|
124
|
+
/>
|
|
68
125
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
126
|
+
<!-- 动态占位符 -->
|
|
127
|
+
<VideoGridLayout
|
|
128
|
+
:videos="videos"
|
|
129
|
+
:placeholderText="(index) => `摄像头 ${index + 1}`"
|
|
130
|
+
/>
|
|
74
131
|
|
|
75
|
-
|
|
76
|
-
|
|
132
|
+
<!-- 精确控制 -->
|
|
133
|
+
<VideoGridLayout
|
|
134
|
+
:videos="videos"
|
|
135
|
+
:placeholders="['主摄像头', '副摄像头', '', '备份']"
|
|
136
|
+
placeholderText="空闲"
|
|
137
|
+
/>
|
|
77
138
|
```
|
|
78
139
|
|
|
79
|
-
|
|
140
|
+
## 🎯 支持的布局类型
|
|
141
|
+
|
|
142
|
+
| 布局 | 说明 | 视频数量 |
|
|
143
|
+
|------|------|----------|
|
|
144
|
+
| `'1'` | 单画面 | 1 |
|
|
145
|
+
| `'2'` | 左右分屏 | 2 |
|
|
146
|
+
| `'3'` | 上下分屏 | 2 |
|
|
147
|
+
| `'4'` | 四分屏 | 4 |
|
|
148
|
+
| `'6'` | 六分屏（2x3） | 6 |
|
|
149
|
+
| `'7'` | 七分屏（1大3小） | 4 |
|
|
150
|
+
| `'8'` | 八分屏（2x4） | 8 |
|
|
151
|
+
| `'9'` | 九分屏（3x3） | 9 |
|
|
152
|
+
| `'10'` | 十分屏（1大6小） | 7 |
|
|
153
|
+
| `'13'` | 十三分屏（1大9小） | 10 |
|
|
154
|
+
| `'16'` | 十六分屏（4x4） | 16 |
|
|
155
|
+
|
|
156
|
+
## 🔧 高级用法
|
|
157
|
+
|
|
158
|
+
### 自定义样式
|
|
159
|
+
|
|
160
|
+
虽然组件内置了完整样式，但你也可以通过CSS变量自定义外观：
|
|
161
|
+
|
|
162
|
+
```css
|
|
163
|
+
.video-grid-layout {
|
|
164
|
+
--primary-color: #your-color;
|
|
165
|
+
--background-color: #your-bg;
|
|
166
|
+
}
|
|
167
|
+
```
|
|
80
168
|
|
|
81
|
-
###
|
|
169
|
+
### 自定义视频渲染
|
|
82
170
|
|
|
83
|
-
|
|
84
|
-
- **交互控制** - 动态切换布局、自定义尺寸
|
|
85
|
-
- **拖拽排序** - 6分屏布局支持拖拽重新排列（无动画效果）
|
|
86
|
-
- **自定义占位符** - 函数生成和数组自定义占位符
|
|
87
|
-
- **布局展示** - 所有支持的分屏布局预览
|
|
171
|
+
使用默认插槽自定义视频显示：
|
|
88
172
|
|
|
89
|
-
|
|
173
|
+
```vue
|
|
174
|
+
<VideoGridLayout :videos="videos">
|
|
175
|
+
<template #video="{ video, index }">
|
|
176
|
+
<video :src="video.url" controls />
|
|
177
|
+
</template>
|
|
178
|
+
</VideoGridLayout>
|
|
179
|
+
```
|
|
90
180
|
|
|
91
|
-
|
|
181
|
+
## 📄 License
|
|
92
182
|
|
|
93
|
-
|
|
183
|
+
MIT License - 详见 [LICENSE](LICENSE) 文件
|
|
94
184
|
|
|
95
|
-
|
|
185
|
+
## 🤝 贡献
|
|
96
186
|
|
|
97
|
-
|
|
98
|
-
- 控制宽/高的输入框
|
|
99
|
-
- 全局占位文本设置
|
|
100
|
-
- 按钮示例：按索引设置占位符数组（演示单个/批量覆盖）
|
|
187
|
+
欢迎提交 Issue 和 Pull Request！
|
|
101
188
|
|
|
102
|
-
|
|
189
|
+
- 🐛 [报告问题](https://github.com/laylwenl/videoSplitScreen/issues)
|
|
190
|
+
- 💡 [功能建议](https://github.com/laylwenl/videoSplitScreen/issues)
|
|
191
|
+
- 🔧 [代码贡献](https://github.com/laylwenl/videoSplitScreen/pulls)
|
|
103
192
|
|
|
104
|
-
|
|
193
|
+
## 📞 联系我们
|
|
105
194
|
|
|
195
|
+
如有问题或建议，请通过以下方式联系：
|
|
196
|
+
- 📧 Email: your-email@example.com
|
|
197
|
+
- 🐙 GitHub: [laylwenl/videoSplitScreen](https://github.com/laylwenl/videoSplitScreen)
|
|
106
198
|
|
|
107
199
|
|