video-split-screen 1.0.19 → 1.0.20
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 +0 -46
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,52 +52,6 @@ import 'video-split-screen/dist/style.css'
|
|
|
52
52
|
1. `placeholders[index]`（若存在）
|
|
53
53
|
2. `placeholderText`（若为函数则调用函数并传入视觉索引；若为字符串则直接使用）
|
|
54
54
|
3. 回退为视觉索引 + 1（按从左到右、从上到下的视觉顺序编号）
|
|
55
|
-
示例与截图
|
|
56
|
-
|
|
57
|
-
## 示例项目
|
|
58
|
-
|
|
59
|
-
示例项目包含在本包的 `example` 目录中，展示了组件的所有功能。
|
|
60
|
-
|
|
61
|
-
### ✨ 重要特性
|
|
62
|
-
|
|
63
|
-
- 🔧 **直接使用本地包源码** - 无需npm安装，修改包代码后立即生效
|
|
64
|
-
- ⚡ **热重载** - 修改组件代码后自动更新示例
|
|
65
|
-
- 🎯 **完整功能演示** - 涵盖所有组件特性和使用场景
|
|
66
|
-
|
|
67
|
-
### 运行示例
|
|
68
|
-
|
|
69
|
-
```bash
|
|
70
|
-
# 方法1：进入示例目录运行
|
|
71
|
-
cd example
|
|
72
|
-
npm install # 只需要安装示例依赖
|
|
73
|
-
npm run dev
|
|
74
|
-
|
|
75
|
-
# 方法2：使用便捷脚本
|
|
76
|
-
cd example && ./run-example.sh
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
打开浏览器访问 `http://localhost:5173` 查看示例。
|
|
80
|
-
|
|
81
|
-
### 示例包含的功能
|
|
82
|
-
|
|
83
|
-
- **基础使用** - 简单的4分屏布局
|
|
84
|
-
- **交互控制** - 动态切换布局、自定义尺寸
|
|
85
|
-
- **拖拽排序** - 6分屏布局支持拖拽重新排列（无动画效果）
|
|
86
|
-
- **自定义占位符** - 函数生成和数组自定义占位符
|
|
87
|
-
- **布局展示** - 所有支持的分屏布局预览
|
|
88
|
-
|
|
89
|
-
示例页面截图（本地运行时预览）。截图文件位于仓库：`docs/example-page.png`。
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
注意：当前打包入口同时包含命名导出与默认导出（插件 `install`）——消费者既可以使用 `app.use(VideoSplitScreen)` 全局注册，也可以按需导入 `VideoGridLayout`。如果你更偏好仅命名导出（避免 `default` 导出的歧义），我可以调整构建配置使输出仅使用命名导出。
|
|
94
|
-
|
|
95
|
-
示例（demo 控制）
|
|
96
|
-
|
|
97
|
-
示例项目 `video-split-screen-example/src/App.vue` 包含：
|
|
98
|
-
- 控制宽/高的输入框
|
|
99
|
-
- 全局占位文本设置
|
|
100
|
-
- 按钮示例：按索引设置占位符数组（演示单个/批量覆盖）
|
|
101
55
|
|
|
102
56
|
贡献 & Issues
|
|
103
57
|
|