EZUIKit-MultiScreen

一个灵活的分屏布局组件，支持多种分屏模式、自定义布局、主题切换和国际化。

✨ 特性

• ✅ 支持 1、2、4、6、9、16 分屏模式
• ✅ 支持自定义分屏布局
• ✅ 自适应父元素大小
• ✅ 单个屏幕选中功能
• ✅ 左上角序号显示
• ✅ 底部工具栏控制分屏切换
• ✅ 网页全屏和全局全屏支持
• ✅ 主题切换（亮色/暗色）
• ✅ 多语言支持（中文/英文）
• ✅ 事件回调系统

🚀 快速开始

安装依赖

npm install @ezuikit/multi-screen

# or
yarn add @ezuikit/multi-screen

# or
pnpm add @ezuikit/multi-screen

💡 使用示例

构造函数

new MultiScreen(containerID, Player, options);

• containerID: string：容器元素 id（内部使用 document.getElementById(containerID)）
• Player: new (...args: any[]) => AbstractPlayer：播放器类构造器
• options: MultiScreenOptions：初始化配置

基础用法

// 引入样式
import "@ezuikit/multi-screen/dist/style.css";
// 引入flv样式
import "ezuikit-flv/style.css";
import MultiScreen from "@ezuikit/multi-screen";
// 引入flv
import EzuikitFlv from "ezuikit-flv";

const screens = new MultiScreen("app", EzuikitFlv, {
  mode: 4, // 分屏模式
  theme: "dark",
  language: "zh",
  screens: [
    { url: "https://example.com/live1.flv" },
    { url: "https://example.com/live2.flv" },
  ],
});

完整的用例请参考with-react-ts/src/App.tsx

动态操作

// 切换模式
screens.setMode(9);

// 切换自定义布局
screens.setMode({ rows: 3, cols: 5 });

// 切换主题
screens.setTheme("light");

// 监听事件
screens.on("screen:click", (index, screen) => {
  console.log("屏幕被点击:", index);
});

🎨 examples

with-base

原生环境下使用umd demo with-base/index.html

with-react-ts

React + TypeScript demo with-react-ts/src/App.tsx

with-vue-ts

Vue2.5 demo with-vue2.5/src/components/index.vue

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

• API 文档
• 示例代码
• 示例常见问题代码