React 实现常见的拖拽组件
代码地址
可伸缩侧边栏
/src/components/resizeBox手写拖拽 Modal 组件
/src/components/dragModal使用 dnd-kit 实现拖拽组件
/src/components/dndkit使用 dnd-kit 实现嵌套可拖动菜单
/src/components/dndkitMenu
功能演示
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
2025-08-03
Qiankun 常见问题
Qiankun-Vite 插件 Qiankun 默认不能接入 Vite ，需要使用 vite-plugin-qiankun 插件，但是这个插件目前不支持 Qiankun的样式隔离 和 React的热更新 使用 vite-plugin-qiankun 插件，可以配合浏览器插件 React Developer Tools 实现热更新 推荐使用 vite-plugin-qiankun-lite 插件，解决了上面的问题，并且简化了配置 Node 版本问题 Node 16 使用 vite-plugin-qiankun 插件启动时会报错 ReferenceError: ReadableStream is not defined，需要更改 cheerio 的版本（注意不要带 ^ 符号），详见：cheerio upgrade problem 123"devDependencies": { "cheerio": "1.0.0-rc.12"} Node 16 使用 Vite 时，也需要更改版本（其他版本也可自...
2025-07-22
React 原理浅析
前言 强烈推荐这篇文档 Build your own React ！！！有动画和解释，能更好地理解 React 的原理 Github 仓库地址 也可以参考：React 核心原理浅析 参考文章：【鸣谢】 Build your own React React 核心原理浅析
2023-07-06
实现 React、Vue3 的动态路由
后端说明 简单说一下常见的 RBAC (Role Based Access Control) 模型，主要是由 User、Role、Resource 三个表组成，如图所示: User 表存储用户信息，Role 表存储角色信息，Resource 表存储资源信息，User 和 Role 是多对多的关系，Role 和 Resource 是多对多的关系，通过 UserRole 和 RoleResource 两张中间表来实现多对多的关系，UserRole 表存储 User 和 Role 的关系，RoleResource 表存储 Role 和 Resource 的关系 流程 用户登录之后得到用户 Id user_id 在 user_role 表中 根据 user_id 得到对应的角色 role_id 在 role_resource 表中 根据 role_id 得到对应的资源 resource_id 列表 在 resource 表中 根据 resource_id 得到对应的 resource, 最后组合成列表就是用户拥有的资源 示例一 后端返回处理好的树形结构的数据 1234...
2025-01-12
Qiankun + Vite 实现微前端
介绍 Lerna 是一个快速、领先的构建系统，用于管理和发布来自同一源码仓库的多个 JavaScript/TypeScript 软件包 Qiankun 是一个基于 single-spa 的微前端实现库，在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 Vite 是一个超快的前端构建工具，赋能下一代 Web 应用的发展 思路 主应用 app 配置四个菜单 App、 App1、App2、App3 菜单 App 链接主应用 app，可以调用子应用 app1、app2、app3 菜单 App1 链接子应用 app1，样式未隔离，组件库样式未隔离 菜单 App2 链接子应用 app2，样式未隔离，组件库样式隔离 菜单 App3 链接子应用 app3，样式隔离，组件库样式未隔离 项目地址实践包版本 node: 18.20.7 npm: 10.8.2 lerna: 8.1.8 vite: 6.1.0 qiankun: 2.10.16 node 版本小于 18 注意以下几点 所有应用 使用 Vite: 5.4.11 所有子应用 安装 vite-plug...
2025-09-25
Vite 模板语法
场景 当一套代码，需要发布到两个环境（ A环境 和 B环境 ）中时，A环境 下需要系统管理页面，B环境 下不需要系统管理页面。这时，我们可以通过后端返回的菜单控制。 但是如果 A环境 和 B环境 的登录页面也不一样呢？这时，我们就可能需要模板语法来控制。 需要自定义一个 vite 插件，在打包前，读取环境变量，然后使用 blueimp-tmpl 的模板语法对代码进行判断并替换。 项目地址实践安装依赖 blueimp-tmpl 模板语法 1npm install blueimp-tmpl cross-env 跨环境执行命令 1npm install cross-env -D 获取环境变量 在 package.json 文件中添加 scripts 脚本 12345678"scripts": { "dev": "npm run dev:A", "dev:A": "cross-env platform=A vite", "dev:B": &q...
2025-05-25
React Flow
React Flow React Flow 一个可定制的 React 组件，用于构建基于节点的编辑器和交互式图表 官网提供了大量示例，以及在线演示。建议看完每个示例，很有用！！！ 其他参考：Vue Flow 代码地址在线演示 自动布局示例 参考官网示例：Dagre Tree 使用 Dagre 时注意事项 Dagre 布局算法需要指定节点的宽和高，否则会报错 @dagrejs/dagre v1.1.4 在老版浏览器 (eg: chromev89.0.4389.90) 会报 Object.hasOwn is not a function 错误，降级为 @dagrejs/dagre v1.1.3 即可解决 官网示例下面有公开的代码，此处不再贴出代码 复制粘贴示例 参考官网示例：Copy and Paste 可以仿照例子，当节点被选中时，再出现粘贴功能。核心代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525...
评论
