Next-Admin最佳实践!支持可视化拖拽模块
版权声明
我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。
趣谈前端
扫码关注公众号
扫码阅读
手机扫码阅读
项目介绍
徐小夕介绍了自己开源的项目Next-Admin,这是一个支持拖拽搭建模块的管理系统,具备参考线吸附、组件成组与取消成组、组件对齐、支持多选和键盘多选等功能。项目的开源地址和在线演示地址都已提供。
技术实现
在技术实现方面,徐小夕使用了movable模块和大量API来实现拖拽功能,并设计了一套数据结构。同样,元素多选功能使用了selecto模块,成组管理器使用了@moveable/helper。同时,徐小夕分享了一个简单的数据结构示例以支持元素搭建。
工具条实现
工具条的实现包括统一的封装配置和行动方法,徐小夕提供了工具条配置的代码片段,并展示了操作方法的封装,包括顶对齐、底对齐和水平分布的实现。这种封装方式方便了工具条的扩展。
多选 & 成组实现
多选和成组功能的代码直接展现了如何通过编程实现这些复杂的交互功能。完成的代码已同步到Next-Admin项目中,供有兴趣的人研究。
后期规划
徐小夕计划将在Next-Admin中集成更多的最佳实践,并欢迎感兴趣的人一起贡献,提供意见。同时,他鼓励有兴趣的人通过提供的地址体验和学习Next-Admin,也欢迎通过GitHub反馈。
趣谈前端
趣谈前端
扫码关注公众号
徐小夕【知乎专栏作家】掘金签约作者,定期分享前端工程化,可视化,企业实战项目知识,深度复盘企业中经常遇到的500+技术问题解决方案。【关注趣谈前端,前端路上不迷茫】
157 篇文章
浏览 213K
还在用多套工具管项目?
一个平台搞定产品、项目、质量与效能,告别整合之苦,实现全流程闭环。
查看方案
趣谈前端的其他文章
有点意思的gif动图生成平台开发实战(二)
轻松开发一款基于图片序列自动生成gif动图的搭建平台
基于文档自动生成内容站点,支持可视化可配置,还不快来试试?
基于文档一键生成内容站点 + 导航网站,知识沉淀不用等!
安利一款AI驱动的可视化大屏产品,支持一键导出源码
国产自研可视化大屏工具,支持源码下载
pxcharts多维表格ultra版:AI + 多维表,工作效率飙升!
一款开箱即用的AI+多维表格解决方案
《精通react/vue组件设计》之实现一个健壮的警告提示(Alert)组件
前言本文是笔者写组件设计的第七篇文章, 今天带大家实现一个自带主题且可关闭的Alert组件, 该组件在诸如A
加入社区微信群
与行业大咖零距离交流学习
PMO实践白皮书
白皮书上线
白皮书上线