React 实现常见的拖拽组件
代码地址
可伸缩侧边栏
/src/components/resizeBox手写拖拽 Modal 组件
/src/components/dragModal使用 dnd-kit 实现拖拽组件
/src/components/dndkit使用 dnd-kit 实现嵌套可拖动菜单
/src/components/dndkitMenu
功能演示
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
2023-11-29
React 使用 Tinymce 富文本
感谢 TinyMCE 中文文档中文手册 提供的文档支持。 常见功能代码地址功能演示 使用本地方式引入(跳过 API Key) 在 社区版 下载对应版本的压缩包 解压后将 tinymce 文件夹放到项目的 public 文件夹下 在 src/components/CustomEditor/index.tsx 中找到 tinymceScriptSrc，然后引入本地的 tinymce 文件 1234567<Editor ..., init={{ ..., tinymceScriptSrc={'/tinymce/tinymce.min.js'} }}/> 注意: 一定要放在 public 文件下，否则会被打包，导致找不到文件 下载语言包 在 语言包下载地址 找到需要的语言包并下载 解压后将 langs 文件夹放到项目的 public 文件夹下 在 src/components/CustomEditor/index.tsx 中找到 language，填上对应的语...
2024-11-28
Qiankun + Vite 样式隔离解决方案
问题 Qiankun + Vite 作为子应用时，样式隔离无效，即使配置了 experimentalStyleIsolation: true 也无效 Ant Design 组件库样式隔离无效 解决方案 使用 Postcss-Prefix-Selector 插件为样式添加前缀 Ant Design ConfigProvider 配置 prefixCls 样式前缀 配置插件样式隔离 在子应用 vite.config.ts 中配置 postcss-prefix-selector 插件（官方示例） 1234567891011121314151617181920212223242526272829303132import prefixer from 'postcss-prefix-selector';export default defineConfig({ css: { postcss: { plugins: [ prefixer({ prefix: '[d...
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...
2024-11-13
Qiankun + Vite 多个子应用共存
介绍 最初接触 umi 微前端 时，感觉这个就是两种子应用的加载方式 路由匹配方式 手动加载方式 后来在网上看到大佬的发的这个文章 探索微前端的场景极限，才发现这个实现不简单，引用了大佬的话： 在应用 A 中通过调用 loadMicroApp(B) 的方式唤起微应用 B，然后在微应用 B 中通过 loadMicroApp(C) 的方式唤起微应用 C，通过这样的调用链路即可很完美的完成产品上的诉求。 但是现实情况往往没有那么简单，前面提到过，若想要 loadMicroApp API 能符合预期的运行，我们需要确保被加载的微应用是不含自己的路由系统，否则会出现多个应用间路由系统互相 抢占/冲突 的情况。 这种场景下，我们其实只需要确保微应用的路由系统不会干扰到全局的 URL 系统即可。幸运的是 react-router 的 memory history 模式很好的解决了这一问题。 思路 主应用 app 有链接两个子应用 app1 和 app2 子应用 app1 可以通过 loadMicroApp(app1) 的方式打开子应用 app2 仓库地址项目搭建...
2025-06-17
Qiankun 打包优化
文章参考下面两个 issues：提取公共依赖 doc、qiankun 如何复用公共依赖 思路 方式一：通过 CDN 引入公共依赖，并在 主子应用 中排除这些公共依赖。（如果 CDN网站 挂了，网站也就挂了，有风险） 方式二：将 CDN 资源下载到 public 文件夹下，并在 主子应用 中排除这些公共依赖 一般来说，只需要在 主应用 中引入即可，子应用 会复用主应用的资源，这个时候子应用单独访问（直接通过 http://localhost:8001/ 访问，而不是主应用路由点击）会报错，因为缺少依赖 如果需要 子应用 可以单独访问（直接通过 http://localhost:8001/ 访问，而不是主应用路由点击），那么也需要在 子应用 中引入，需要用到 ignore 关键字 项目地址创建项目初始化项目 项目目录结构 12345678910111213141516171819202122232425262728|── 项目根目录│ ├── packages # 包目录│ │ ├── app ...
2025-11-30
微前端SDK
路线规划 规划图地址 项目介绍 整个 SDK 都是围绕 getRoutesApi、getUserInfoApi 这两个接口进行设计的，旨在简化微前端应用的开发 getRoutesApi 接口用于获取应用路由信息，包括主应用和微应用的路由配置。因为 Qiankun 的 entry 配置比较特殊，在本地开发时是本地服务 "entry": "http://localhost:5174"，在生产环境是文件路径 "entry": "/subapp/"，所以 主应用 需要使用 vite-plugin-mock 插件 mock 接口 getUserInfoApi 接口用于获取用户 user、权限 permissions、角色 role、配置信息 setting，以便进行权限控制和个性化设置。理论上来说 permissions 中应当包含 getRoutesApi 中的所有的路由路径，否则页面出走 <NotPermission /> 组件。（目前的方案是所有的组件手动包一层 <NotPer...
评论
