MeogicTabManager
MeogicTabManager是一个有可拓展性的、headless的JavaScript标签页管理框架。 MeogicTabManager旨在提供可自由组装页面框架、自定义页面组件、甚至覆盖框架自带事件响应的开发体验。 MeogicTabManager支持通过Vue、React、以及其它UI框架来注册显示各式各样的动态的标签页,同时还能响应全局变量的变化。
快速开始
npm install @meogic/tab-manager-vue --save
如何自定义标签页
如果自定义标签组
自定义后如何注册
在初始化config中,添加对应的Node类,参照App.vue
开发注意
- 不要在事件响应的地方再调用
tabManager.dispatchCommand
来触发对应的响应,而是直接调用对应的方法。因为那样会导致很多不必要的update,最终导致tabManager.registerUpdateListener
拿到的值不正确
数据结构
默认情况
root-node:
- window-node
- tab-group-node
- tab-node
新开一个tab
root-node:
- window-node
- tab-group-node
- tab-node
- tab-node
切分窗口
root-node:
- window-node
- tab-group-node
- tab-node
- tab-node
切分窗口
root-node:
- window-node
- tab-group-node
- tab-node
- tab-node
- tab-group-node
- tab-node
继续切分窗口
root-node:
- window-node
- window-node
- tab-group-node
- tab-node
- tab-node
- tab-group-node
- tab-node
- tab-group-node
- tab-node
给开发者
npm i --force
npm run dev
如何添加一个新的模块
- 在packages下新增子文件夹
- 将那个文件夹的信息添加到packages.js
- 将那个文件夹的信息添加到jest.config.js,以便你可以进行单元测试
- 将那个文件夹的信息添加到playwright.config.js,以便你可以进行端到端测试
- 将那个文件夹的信息添加到build.js,根据字母排序
如何运行测试
npm run test-unit
npm run test-e2e-chromium
如何发布
npm run release
License
MeogicTabManager is MIT licensed.