React 实现常见的拖拽组件
代码地址
可伸缩侧边栏
/src/components/resizeBox手写拖拽 Modal 组件
/src/components/dragModal使用 dnd-kit 实现拖拽组件
/src/components/dndkit使用 dnd-kit 实现嵌套可拖动菜单
/src/components/dndkitMenu
功能演示
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
2024-10-23
Umi 实现微前端
建议阅读 Umi 微前端，了解 微前端 的基本使用 介绍 Lerna 是一个快速、领先的构建系统，用于管理和发布来自同一源码仓库的多个 JavaScript/TypeScript 软件包 Umi 企业级前端开发框架，它提供了一套完整的 Web 应用开发解决方案，包括路由、状态管理、数据请求、页面布局、主题定制等功能 项目地址实践包版本 node: 18.20.7 npm: 10.8.2 lerna: 8.1.8 umi: 4.4.0 项目目录12345678910111213141516171819├── 根目录 |── packages # 项目目录, 名称要跟 package.json 中 workspaces 以及 lerna.json 中 packages 一致 |── app # 主应用app |── src |── .umi # 动态生成的文件夹 |── .env # 配...
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...
2024-03-10
前端常见的文件操作
记录一下工作中用到的文件操作 文件的预览微软的在线预览功能 注意: 文件需要能够公开访问 1234567// 前缀: https://view.officeapps.live.com/op/view.aspx?src=// url: 文件地址window.open( `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent( url )}`); 使用微软的在线预览功能预览文件 Word https://view.officeapps.live.com/op/view.aspx?src=https://cdn.zxiaosi.com/hexo/office/temp.docx Excel https://view.officeapps.live.com/op/view.aspx?src=https://cdn.zxiaosi.com/hexo/office/temp.xlsx PPT https://view.officeapps.live.com/op/...
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-07-22
React 原理浅析
前言 强烈推荐这篇文档 Build your own React ！！！有动画和解释，能更好地理解 React 的原理 Github 仓库地址 也可以参考：React 核心原理浅析 参考文章：【鸣谢】 Build your own React React 核心原理浅析
2024-12-19
模块联邦 (Vite)
模块联邦 什么是模块联邦？模块联邦是 Webpack 5 的新特性，它允许不同的应用或组件之间进行动态的模块共享。 为什么要使用模块联邦？模块联邦可以解决多个应用或组件之间的依赖问题，避免重复安装依赖，提高开发效率。 Webpack Module Federation 项目地址项目目录123456789101112131415161718├── 根目录 ├── packages ├── host # host 项目 ├── src ├── App.tsx ├── vite-env.d.ts ├── vite.config.ts ├── remote # remote 项目 ├── src ├── components ├── CustomButton ├── index.tsx ├── index.ts ├── App.tsx ├── ...
评论
