关于ant-design-vue/pro-layout的分支antdv-pro-layout组件

386 阅读1分钟

pro-layout分支

社区@ant-design-vue/pro-layout组件,原本是同步react社区的功能,奈何无人维护停留在了3.2.3版本。原本我打算通过pr去贡献代码的,可惜仓库审核较慢,项目上又需要,只能自己发布分支antdv-pro-layout去魔改。

随着vue的升级,原本的组件功能遇到些许问题需要修复和拓展。原本项目组件多模块管理而且打包含.d.ts声明和less样式最终dist产物有3.9MB,当时对于我小白看项目中tsx是一头雾水。硬着分析和vue官网的tsx教程,算是大致清楚其中分布。随即有个想法,独立出组件改用vite打包工具。

使用vite后,放弃了less的样式,通过vite-plugin-dts插件很方便的输出类型声明.d.ts文件,而且最终产物也降到了948KB。重新优化了代码目录结构和逻辑分布,发布antdv-pro-layout的魔改分支。而且也对antdv4版本做了支持发布4.x的版本。使用可查阅说明中的功能支持。API

静态预览Mock Layout的混合布局

Modal模态框封装

在个人开发中有需要实现窗口拖动的需求,随后我参考学习了其他项目补充窗口全屏和拉伸大小功能,封装出 antdv-pro-modal API

  • 窗口可以拖动
  • 窗口可以全屏、关闭
  • 窗口可以通过八个方向拉伸改变大小
  • 限制窗口最小宽度/高度

modal的拖动

其他vue组件库都可以参考替换组件迁移到对应的生态,有好的想法可以给我留言或通过PR一起进步。