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-02-18
Node Cli
Node Cli 常用工具介绍 @clack/prompts : 用于命令行交互 picocolors : 用于输出样式 unbuild : 用于打包项目 仓库地址项目实践项目目录12345├── node-cli ├── .gitignore # git 忽略文件 ├── index.js # 入口文件 ├── package.json # 项目配置 ├── README.md # 项目说明 配置项目 初始化项目 1npm init -y 修改 package.json 文件内容如下 12345678910111213141516{ "name": "create-yourname-app", // 项目名称 npm i create-yourname-app -g "version":...
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-plugin-qiankun 后启动会报错 ReferenceError:...
2025-06-17
Qiankun 打包优化
文章参考下面两个 issues：提取公共依赖 doc、qiankun 如何复用公共依赖 思路 方式一：通过 CDN 引入公共依赖，并在主子应用中排除这些公共依赖。（如果 CDN网站 挂了，网站也就挂了，有风险） 方式二：将 CDN 资源下载到 public 文件夹下，并在主子应用中排除这些公共依赖。防止每个应用都在 public 中引入依赖，这里将 public 文件指定为 libs，统一存放公共依赖。 项目地址创建项目初始化项目 项目目录结构 123456789101112131415161718192021222324252627|── 项目根目录│ ├── libs # 存放公共依赖（使用cdn方式不需要这个文件夹）│ │ ├── react@18.3.1│ │ │ ├── react.development.js│ │ │ ├── react.production.min.js│ │ ├── react-dom@18.3.1│ │ │ ├──...
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:...
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) 的方式打开子应用...
2025-04-23
React Compiler
React Compiler React Compiler 是目前在 RC 中的一个新编译器，会自动记住你的代码，避免忘记或者错误的使用 useMemo、useCallback、React.memo 等 React 的 API 项目地址创建 React Compiler 应用新建一个项目1234567891011# 通过 vite 创建项目npm create vite@latest# Project name:react-compiler# Select a framework:React# Select a variant: (这里一定要选择 TypeScript, 因为 TypeScript+SWC 还没有适配)TypeScript 安装配置依赖 安装 babel-plugin-react-compiler 和 eslint-plugin-react-hooks 12npm install --save-dev --save-exact babel-plugin-react-compiler@rcnpm install --save-dev...
评论
