点击空白处退出提示
vue-code-layout
我要开发同款授权协议MIT许可
作品详情
1. 主要分为:CodeLayout模块是类似 VScode 最外层的界面布局, 它可以用来搭建你的编辑器外层;SplitLayout专用于多个编辑器的分割布局,它支持无限层级面板嵌套和分割,通常可以用于文件编辑器中,需要同时打开编辑多个文件时;其他小组件例如滚动条、按钮渲染、悬浮提示,可用于界面中独立使用。
2. 我负责整个项目的搭建与开发,主要使用了Vue+Typescript+Vite技术栈,最终实现了整个项目。
3. 本项目主要难点是编辑器布局和每隔网格之间的拖放,大小缩小等等,主要解决方案是使用统一的数据结构,用数据驱动界面,然后是统一监听drag事件进行处理实现以上功能。
![](https://filescdn.proginn.com/works/0dd8842f9cedb4d94d76b62a66419bff595473ab.jpg?x-oss-process=image/resize,w_800)
![](https://filescdn.proginn.com/works/ab82c50c84eeaa23bef10b6b0b0fe7f43174ac56.jpg?x-oss-process=image/resize,w_800)
![](https://filescdn.proginn.com/works/7c31d29ff3312b9530cac50b31739dbec54692da.jpg?x-oss-process=image/resize,w_800)
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
评论