react-umi-对接Api-2.菜单模块

最新推荐文章于 2023-05-16 10:15:47 发布
最新推荐文章于 2023-05-16 10:15:47 发布
阅读量324 收藏
点赞数
分类专栏： umi3+egg中台实战项目 文章标签： reactjs typescript umi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echo_Ae/article/details/111403667
版权
本文介绍如何在React Umi项目中实现菜单模块的CURD操作，特别是焦点集中在菜单结构树的拖拽功能。通过获取全部菜单数据并生成树形结构，详细阐述了拖放事件的处理以及右键创建一级菜单的方法。
摘要由CSDN通过智能技术生成

在这里插入图片描述

菜单结构树拖拽演示

在这里插入图片描述
本篇看点：

  1. 菜单模块的CURD
  2. 菜单结构树的拖拽

src - pages - menu

index.tsx
import React, {
    useState, useRef } from 'react';
import {
    PageHeaderWrapper
了解本专栏 订阅专栏 解锁全文 超级会员免费看
An_s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
react-umi-2-5.菜单列表
echo_Ae的博客
12-07 516
index.tsx import React, { useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tooltip, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd'; import { QuestionCircleOutlined, HomeOutlined, PlusOut..
react-umi-2-2.多菜单以及登陆页
echo_Ae的博客
12-07 973
我们上篇都介绍了如何设置layout布局，这时候我要多个页面呢，还有登陆页是没有layout的咋弄？难道要跟之前一样在layout组件里面写个判断啥的？ no no no 用了umi3框架也是几行代码搞定 .umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, layout: { name: '
react-menu-list:React下拉菜单组件
05-03
React菜单列表 该项目是用于构建菜单的一组组件。 该项目适用于下拉菜单和自动完成菜单。 菜单可通过键盘正确访问，并且像已建立的桌面应用程序菜单一样具有优美的外观，例如行为良好的子菜单，即使用户在向子菜单的下拉菜单移动时将鼠标短暂移至其他菜单项上，这些菜单仍保持打开状态。 此项目与其他类似项目不同，因为它允许菜单中包含任意元素，包括允许菜单项嵌套到其他元素中，并允许自定义菜单项控制光标。 该项目的菜单没有太多CSS样式。 您需要携带自己CSS。 这使得该项目非常适合尝试匹配其应用程序现有样式的用户。 建议您的应用程序围绕该项目的组件创建包装器组件，以添加应用程序CSS。 上面的例子可以在这里尝试： 您可以在example目录中找到其代码。 该示例可以通过运行以下命令进行编译： yarn yarn example-build # or use this to auto-rebu
React项目_动态显示菜单列表
初郁
09-05 1445
在src目录下的config文件下建立一个包含所有导航信息的menuConfig.js。将所有导航信息抽离出来存放。 const menuList = [ { title:'首页', //菜单标题名称 key:'/home', //对应的path icon:'TeamOutlined',//图标名称 }, { title:'用户管理', key:'/user', icon:'TeamOu
React 免费教程 （二）列表菜单演示
琼楼玉宇
07-24 132
知识点： Fragment importReact,{Component,Fragment}from'react' constructor 说明数据 constructor(props){ super(props) this.state={ inputValue:"", list:[] } } input 事件 <Fragment...
使用umiJs框架搭建的react项目react-umi-master.zip
最新发布
07-03
使用umiJs框架搭建的react项目react-umi-master.zip
react-horizontal-scrolling-menu:React的水平滚动菜单组件
04-18
npm install --save react-horizontal-scrolling-menu 在项目中： import React , { Component } from 'react' ; import ScrollMenu from 'react-horizontal-scrolling-menu' ; import './App.css' ; // list o
react-native-geolocation：React Native的地理位置API
02-03
@react-native-community/geolocation Geolocation API扩展了。 当前，在Android上，它使用 。 Google不推荐使用此API，因为它不如推荐的准确和慢。 这是我们希望在不久的将来更改的内容 。 为了将新的与React ...
react-monaco-editor：摩纳哥的React编辑器
02-05
yarn add react-monaco-editor 与Webpack一起使用 import React from 'react' ; import { render } from 'react-dom' ; import MonacoEditor from 'react-monaco-editor' ; class App extends React . Component {
react-umi可插拔的企业级react应用框架
08-14
7. **其他高级特性**：除了上述特性，Umi 还支持服务端渲染（SSR）、预渲染（Static Site Generation, SSG）、Ant Design 集成、API 路由、HMR（热模块替换）等，全面覆盖现代 Web 应用的开发需求。 在实际开发中，...
易语言动态提示组件
07-23
易语言动态提示组件源码,动态提示组件
umi react菜单配置（router文件路由+接口路由组合）
dmr123456的博客
05-16 930
【问题描述】：项目路由由前端路由文件以及后端接口获取到的路由组合而成，接口获取到的路由菜单选中无标记，且会自动折叠。如果接口返回的菜单格式与前端路由文件中的有些许不一致，则需重写。，重写菜单选中、打开逻辑。,对数据进行改造组合。
Umi3.5配置全局路由及菜单
比起未来可期，我更喜欢如约而至
03-17 4908
目录 需求分析 功能实现 1.构建全局layout页面并实现路由跳转 2.全局layout根据路由配置生成具体菜单 需求分析 本文与上一篇文章利用umi.js 3.5+Dva.js 搭建React框架无缝连接，上文我们实现了React开发环境的基本搭建。 但是根据我们的使用经验，还有一个功能缺席： 全局菜单显示，点击跳转到不同的页面 实现效果如下所示： 功能实现 1.构建全局layout页面并实现路由跳转 UmiJs 约定式路由 src/文件夹下新建layouts文件夹
状态提示小组件
qq_56348427的博客
07-08 210
效果： types.ts export interface RecordType { id: string; errMsg: string; } export interface StatusParams { desc: string; className: string; } export interface DescType { name: string; label: string; } Table.ts import {DescT.
ant design pro v5 总结
iuaogh的博客
11-10 6923
Ant Design Pro v5使用心得相比V4，V5到底强在哪？如何更改 title图标和加载时的页面？defaultSettings中菜单的几种模式及主题等配置国际化request 这篇文章主要是我在使用V5的过程中的一些发现以及遇到的坑，希望能够帮到大家，若有问题还请提出，谢谢！ 相比V4，V5到底强在哪？ 其实主要是ProComponents的功劳，我用它有两三个月了，在此记录一下使用遇到的一些坑和经验 今天我再次create了一个新的v5的项目，发现跟我的不太一样,不过没关系，大致都是一样的 v
antd vue图标选择器
a2925447584的博客
05-12 3926
目前antd vue还没有图标选择器，但是由于需求所需所以自定义了一个iconPicker 一、效果展示 二、使用 1、自定义组件iconPicker.vue，支持’click’, ‘hover’, ‘focus’ 三种触发方式，默认click触发 <template> <a-popover :trigger="trigger" v-model:visible="visible" > <template #title
umi项目菜单权限管理(access)
huanhuan03的博客
10-08 6926
umi权限管理 路由权限控制 access routes
react 入坑学习（四）修改Umi的菜单宽度
JeffanChen的博客
07-22 1348
修改Umi的菜单宽度 先用网页查看器选中要改的整个菜单 找到对应的class，我这里是ant-pro-sider-menu-sider 然后再global.less中添加该元素， 再刷新，发现依然没有改变，是因为内联的权限较高，无法改变 所以再加上!important 在保存刷新一下， 菜单就成功改变宽度了。 新手小白，如果有帮助到你，能点个赞嘛！!谢谢！！！ ...
利用umi3.4的框架引用antd的一个简单的布局
qq_45736175的博客
05-30 1856
1.先看官网的布局有哪些样式（https://ant.design/components/layout-cn/） 此次我将引用如下的布局： 2.在项目的src目录下新建一个layouts目录，并在该目录下新建一个index.js 因为在umi中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件 所以我们需要把布局的代码写在该index.js中 import React from 'react'; import { Layout } from 'antd'; con
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

An_s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值