video-split-screen 1.0.20 → 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.
Files changed (2) hide show
  1. package/README.md +165 -27
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,35 @@
1
- # video-split-screen
1
+ # Video Split Screen
2
2
 
3
- Vue 3 视频分屏组件（VideoSplitScreen）——可发布到 npm 的插件包。
3
+ [![npm version](https://badge.fury.io/js/video-split-screen.svg)](https://www.npmjs.com/package/video-split-screen)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
5
 
5
- 安装（npm）
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
- # or
22
+ # 或
10
23
  yarn add video-split-screen
24
+ # 或
25
+ pnpm add video-split-screen
11
26
  ```
12
27
 
13
- 快速使用（全局注册）
28
+ ## 🚀 快速开始
14
29
 
15
- ```ts
30
+ ### 全局注册
31
+
32
+ ```typescript
16
33
  import { createApp } from 'vue'
17
34
  import App from './App.vue'
18
35
  import VideoSplitScreen from 'video-split-screen'
@@ -22,40 +39,161 @@ app.use(VideoSplitScreen)
22
39
  app.mount('#app')
23
40
  ```
24
41
 
25
- 按需导入（命名导出）
42
+ ### 按需导入
26
43
 
27
- ```ts
44
+ ```typescript
28
45
  import { VideoGridLayout } from 'video-split-screen'
29
46
  ```
30
47
 
31
- 样式
48
+ ### 基础用法
49
+
50
+ ```vue
51
+ <template>
52
+ <VideoGridLayout
53
+ :videos="videoList"
54
+ layout="4"
55
+ @videosChange="handleVideosChange"
56
+ />
57
+ </template>
58
+
59
+ <script setup lang="ts">
60
+ import { ref } from 'vue'
61
+ import { VideoGridLayout } from 'video-split-screen'
62
+
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
+ ```
75
+
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
+ ```
108
+
109
+ ## 🎨 占位符配置
110
+
111
+ 组件支持灵活的占位符配置，优先级如下：
112
+
113
+ 1. **`placeholders[index]`** - 最高优先级，精确控制某个位置的占位符
114
+ 2. **`placeholderText`** - 中等优先级，支持字符串或函数
115
+ 3. **默认编号** - 最低优先级，显示位置索引+1
116
+
117
+ ### 示例
118
+
119
+ ```vue
120
+ <!-- 自定义占位符文本 -->
121
+ <VideoGridLayout
122
+ :videos="videos"
123
+ placeholderText="等待视频..."
124
+ />
125
+
126
+ <!-- 动态占位符 -->
127
+ <VideoGridLayout
128
+ :videos="videos"
129
+ :placeholderText="(index) => `摄像头 ${index + 1}`"
130
+ />
131
+
132
+ <!-- 精确控制 -->
133
+ <VideoGridLayout
134
+ :videos="videos"
135
+ :placeholders="['主摄像头', '副摄像头', '', '备份']"
136
+ placeholderText="空闲"
137
+ />
138
+ ```
139
+
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
+ ```
168
+
169
+ ### 自定义视频渲染
32
170
 
33
- 包内置一份默认样式，构建时会产出 `dist/style.css`。如果你全局注册插件（`app.use(...)`）示例项目会自动引入样式；也可以按需手动引入：
171
+ 使用默认插槽自定义视频显示：
34
172
 
35
- ```ts
36
- import 'video-split-screen/dist/style.css'
173
+ ```vue
174
+ <VideoGridLayout :videos="videos">
175
+ <template #video="{ video, index }">
176
+ <video :src="video.url" controls />
177
+ </template>
178
+ </VideoGridLayout>
37
179
  ```
38
180
 
39
- 主要 Props（VideoGridLayout）
181
+ ## 📄 License
40
182
 
41
- - `videos: VideoItem[]` — 视频数组（必填）
42
- - `layout?: LayoutType` — 布局类型（'1'|'2'|'3'|'4'|'6'|'7'|'8'|'9'|'10'|'13'|'16'），默认 `'1'`
43
- - `availableLayouts?: LayoutType[]` — 可选显示的布局按钮列表
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>` — 按索引覆盖占位符（可单独修改某些格子）
183
+ MIT License - 详见 [LICENSE](LICENSE) 文件
49
184
 
50
- 占位符规则（优先级）
185
+ ## 🤝 贡献
51
186
 
52
- 1. `placeholders[index]`（若存在）
53
- 2. `placeholderText`（若为函数则调用函数并传入视觉索引；若为字符串则直接使用）
54
- 3. 回退为视觉索引 + 1（按从左到右、从上到下的视觉顺序编号）
187
+ 欢迎提交 Issue 和 Pull Request！
55
188
 
56
- 贡献 & Issues
189
+ - 🐛 [报告问题](https://github.com/laylwenl/videoSplitScreen/issues)
190
+ - 💡 [功能建议](https://github.com/laylwenl/videoSplitScreen/issues)
191
+ - 🔧 [代码贡献](https://github.com/laylwenl/videoSplitScreen/pulls)
57
192
 
58
- 欢迎在 `repository` 中提交 issue / PR，或把你希望支持的更多布局和行为告诉我。
193
+ ## 📞 联系我们
59
194
 
195
+ 如有问题或建议，请通过以下方式联系：
196
+ - 📧 Email: your-email@example.com
197
+ - 🐙 GitHub: [laylwenl/videoSplitScreen](https://github.com/laylwenl/videoSplitScreen)
60
198
 
61
199
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "video-split-screen",
3
- "version": "1.0.20",
3
+ "version": "1.0.21",
4
4
  "description": "Vue 3 视频分屏组件（VideoSplitScreen）",
5
5
  "keywords": [
6
6
  "vue",