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-02-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-12-01
lerna多包项目
简介 Lerna 是一个快速、领先的构建系统，用于管理和发布来 自同一源码仓库的多个 JavaScript/TypeScript 软件包。 lerna8 + npm + workspaces + umi包版本123"node": "^20.18.0","npm": "^10.8.2","lerna": "^8.1.8", 开启 npm workspaces 命令行执行 npx lerna init, 初始化项目 lerna.json 中添加下面配置 12345{ "npmClient": "npm", "packages": ["packages/*"], ... // 其他配置} package.json 中添加下面配置 123{ "workspaces":...
2024-04-10
前端常见的文件操作
记录一下工作中用到的文件操作 文件的预览微软的在线预览功能 注意: 文件需要能够公开访问 123// 前缀: 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...
2023-09-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 得到对应的...
2023-08-29
使用useSWR+Axios封装React请求
前提 因为 React18 的 React.StrictMode (严格模式), 组件会在开发环境下执行两次, 但是在生产环境下, 只执行一次. 所以在 useEffect 写请求就不再合适。 关于 useSWR 关于 React.StrictMode 示例代码 封装 Axios请求响应拦截器(错误抛出的弹窗, 自定义处理)12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667// 请求拦截器(全局配置)axios.interceptors.request.use( (config: any) => { // 这里可以做一些请求拦截，比如请求头携带 token // @ts-ignore (防止下面报错) // config.headers.Authorization =...
评论
