react antd confirm content list_react如何拖拽模态框 - 5118会员优惠码

最新推荐文章于 2024-07-24 13:04:52 发布
最新推荐文章于 2024-07-24 13:04:52 发布
阅读量87 收藏
点赞数
文章标签： react antd confirm content list React DevTools无效 react div 事件优先级 react Link跳转无效 vue如何通过ref判断是否存在class类名

实际开发中,模态框展现数据会经常出现.但不幸的是有时功能开发完了,UI同学突然提出需求希望模态框能拖拽.如何在不修改原来代码的基础上实现拖拽呢.最终效果图如下:

748d462f4b3f1d81330fddb88834d131.gif

1.创建高阶组件DragHoc

新建文件ModalDrag/,将下面代码copy进去

DragObj是具体拖拽的原生js代码,后面再看

  • DragHoc是创建高阶组件的函数,其中参数InnerComponent是需要被改造的模态框组件,函数最终的返回值是增强后的组件
  • render方法中直接返回了 \ ,并没有返回一个新组件.整个高阶组件的作用只是在输入组件上加了一个ref属性.有了ref,init方法中可以通过 获取到传入的任意组件的原生dom.拿到dom以后就可以做底层的dom操作或事件绑定以实现拖拽
  • init方法里加了一个延时0s的定时器,由于笔者的项目中InnerComponent是用ant design里面的Modal封装而成.在调试的过程中发现, 只能返回已经挂载到页面上的dom元素,否则返回null.而ant design里面的Modal渲染内容是异步的,因此要使用定时器等到下一帧才能使用findDOMNode得到组件的dom元素.如果InnerComponent里面不包含异步渲染的代码,下面的定时器可以删除
  • 组件卸载时调用destory方法将所有绑定的事件释放掉

拖拽一个元素通常需要传入两个参数.一个是推拽后能移动的区域,对应着上图中的整个导出表格控件,控件的类名为main_class.另外一个是监听拖拽的区域,对应着上图中的头部,只有当鼠标在头部按下时再移动才能拖动表格.头部的类名为title_class.两个参数都从外部传入.如果两个参数都不传,默认直接监听child_node并拖拽child_node

复制代码

如果在实践中发现拖拽无效,请务必将上面代码中的child_node打印出来,观察是否获取到了真实的dom以及它内部是否渲染完整.如果没有渲染完全,说明InnerComponent包含异步渲染的代码,要等到渲染完毕后再进行拖拽事件绑定

2.创建拖拽类DragObj

新建文件ModalDrag/,将下面代码copy进去

下面是实现拖拽的原生代码.主要负责对dom元素进行事件绑定以及改变位置等

复制代码

3.外部调用

引入高阶函数DragHoc,引入需要增强的模态框组件ToastExport

由于笔者在项目中使用 ant design 3.0 中的 Modal 组件做模态框,让其拖拽只需要传递类名 "ant-modal-content" 和 "ant-modal-header".

其他场景需要根据静态模态框组件的dom结构分析哪一部分是要移动的,哪一部分是监听拖拽的,将这两部分的类名作为参数传入

复制代码

调用DragHoc函数生成ToastExportv2后,接下来就可以页面上直接使用.如果业务上需要传递参数直接加在属性上

   const { visible } = ;
   <ToastExportv2 visible={visible}/>
weixin_39958112
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可拖拽的谷歌样式纯javascript模态窗口插件
12-11
draggable-google-modal是一款可拖拽的谷歌样式纯javascript模态窗口插件。该模态窗口插件使用纯js编写，模态窗口可以任意进行拖动，并且模态窗口可以全屏放大，或左右对齐占据半边屏幕。
react如何拖拽模态框
brokenkay的博客
10-22 1270
前言 实际开发中,模态框展现数据会经常出现.但不幸的是有时功能开发完了,UI同学突然提出需求希望模态框能拖拽.如何在不修改原来代码的基础上实现拖拽呢.最终效果图如下: 实践 1.创建高阶组件DragHoc 新建文件ModalDrag/index.js,将下面代码copy进去 DragObj是具体拖拽的原生js代码,后面再看 DragHoc是创建高阶组件的函数,其中参数InnerComponent是需要被改造的模态框组件,函数最终的返回值是增强后的组件 render方法中直接返回了 <InnerC
antd 日期选择框如何提交_基于Ant Design的Modal组件来实现一个可拖拽的React模态框...
weixin_30825389的博客
01-04 197
引言写这篇文章的原因是因为在项目中用到了Antd Design的React组件，当有业务需求需要用到模态框的时候遇到了一些小问题，Antd的模态框Modal组件时不能拖拽的，一般情况下不可拖拽也没什么大的问题，但是遇到了客户提的需求，因此就想着在Modal组件原有的基础上进行扩展，封装一个可拖拽的模态框，当然我使用的这种方式不一定是最好的，所以仅仅是用于参考。外部安装可以使用npm或yarn安装，...
react Model框可拖拽
weixin_47338877的博客
09-06 824
最近因为业务需求需要将ant-d model框设置为可拖拽组件，但因为ant-d 以及pro都没用可拖拽api所以自己用原生dom简单封装了一个 import React from "react"; import {Modal} from "antd"; // 可控长度的随机数拼接时间戳成产唯一id const createUniqID = length=>Number(Math.random().toString().substr(3,length) + Date.now()).toString(3
React 模态框的拉伸和拖动
Kmnyed的博客
05-12 470
拖动使用 react-draggable 插件。
react前端框架，react +antd+react-router+less
06-24
React核心框架： React是一个用于构建用户界面的JavaScript库，它采用声明式编程范式，使代码更加简洁、可预测且易于测试。 React的组件化开发模式允许我们将复杂的界面拆分成多个可复用的组件，提高了代码的可维护...
react_antd:react，react-router-dom @ 4.0，react-redux，antd
05-06
这是一个react + antd的后台管理系统模版框架,具有响应式动态路由（可根据后台服务器提供列表或者登录验证身份进行修改Menu菜单）。 具备列表表单的增删改查、功能齐全的tinymce@4.9富文本、响应式表单验证登录状态...
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
react-antd-starter:React Antd入门
05-10
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
4Geeks_React_todo_list_API-
02-15
Hello World与React样板 该模板类似于create-react-app，但适用于4Geeks Academy学生。 使用git下载样板 $ git clone https://github.com/4GeeksAcademy/react-hello.git $ cd react-hello 并安装npm软件包： $ ...
React实现拖拽效果
前端
09-24 2271
使用react完成拖拽功能
antd使用react-draggable,实现Modal拖拽，hooks写法
最新发布
lxc19930325的博客
07-24 298
Ant Design 提供的Modal是不支持拖动，基于这一点我们需要自定义一个我们自己的Modal组件，来实现拖动。其中会用到的技术有：使用react-draggable来实现modal的拖动。
react按钮拖拽_如何用React开发拖拽组件
weixin_39926193的博客
12-22 332
拖拽组件是在前端开发中十分常见的一个功能，现在无论你是使用React还是Vue，都有很多现成的拖拽组件可以使用。不过，有些时候你可能还是需要自己去实现，那么就必须需要理解其实现原理。接下来这篇文章，我将详细介绍如何使用React框架来实现一个拖拽组件。理解HTML5 拖放API现如今，大部分的前端拖拽组件都依托于HTML5原生提供的拖放接口。那么在开始用具体框架来封装组件的之前，就需要搞清楚这些原...
TS+Hooks二次封装antd Modal，实现可拖拽
o__o__o__o的博客
08-06 2887
使用Typescript和React Hooks二次封装antd的Modal对话框，实现可拖拽效果，并且满足下面的小细节。 1. 拖动时鼠标于DIV的相对位置 2. 拖动时选中文字 3. 边界问题 4. 页面失去焦点 5. 销毁时回到原位
react+ant封装可拖拽（Modal）弹窗，继承官方属性。可进行拓展
gittt的博客
03-27 199
react+ant封装可拖拽（Modal）弹窗，继承官方属性。可进行拓展
antd modal新增可拖动功能
李泽言的博客
05-12 971
antd modal，新增可拖动功能
antd modal 拖动_让Antd Modal变成可拖动弹窗
weixin_26704651的博客
01-17 873
思路：1、首先需要两个DIV，一个是和视口一样大drag-mask，绑定mouseMove事件和mouseUp事件，另一个是和Modal一样大的drag-target，绑定mouseDown事件；2、已知Modal的样式.ant-modal{position:relative;top:100px;left:0px;}，通过更改top、left改变Modal位置；3、mouseDown事件时，记录坐...
re-resizable react-draggable antd Modal 拖拽缩放
weixin_41983443的博客
02-19 393
re-resizable react-draggable antd Modal 拖拽缩放
antd-modal 替代品 可拖动弹窗组件
BearMX的专栏
09-07 9535
1、ModalWin.js import React from 'react'; import {Button, Icon} from 'antd'; import PropTypes from 'prop-types'; import styles from './styles.less'; class ModalWin extends React.Component { ...
使用react+antd实现登录注册功能
05-11
好的，下面是一个简单的示例代码： 首先安装所需依赖： ```bash npm install react antd axios --save ``` 然后创建一个 `Login` 组件和一个 `Register` 组件，分别用于登录和注册的页面展示。其中，我们使用了 `Form` 和 `Input` 组件来实现表单输入，以及 `Button` 组件来实现按钮的功能。 ```jsx // Login.jsx import React, { useState } from 'react'; import { Form, Input, Button, message } from 'antd'; import axios from 'axios'; const Login = () => { const [loading, setLoading] = useState(false); const onFinish = async (values) => { setLoading(true); try { const response = await axios.post('/api/login', values); message.success(response.data.message); setLoading(false); } catch (error) { message.error(error.response.data.message); setLoading(false); } }; return ( <Form name="login" onFinish={onFinish}> <Form.Item name="email" rules={[{ required: true, message: 'Please input your email!' }]} > <Input placeholder="Email" /> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password placeholder="Password" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" loading={loading}> Login </Button> </Form.Item> </Form> ); }; export default Login; ``` ```jsx // Register.jsx import React, { useState } from 'react'; import { Form, Input, Button, message } from 'antd'; import axios from 'axios'; const Register = () => { const [loading, setLoading] = useState(false); const onFinish = async (values) => { setLoading(true); try { const response = await axios.post('/api/register', values); message.success(response.data.message); setLoading(false); } catch (error) { message.error(error.response.data.message); setLoading(false); } }; return ( <Form name="register" onFinish={onFinish}> <Form.Item name="name" rules={[{ required: true, message: 'Please input your name!' }]} > <Input placeholder="Name" /> </Form.Item> <Form.Item name="email" rules={[{ required: true, message: 'Please input your email!' }]} > <Input placeholder="Email" /> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password placeholder="Password" /> </Form.Item> <Form.Item name="confirmPassword" rules={[ { required: true, message: 'Please confirm your password!' }, ({ getFieldValue }) => ({ validator(_, value) { if (!value || getFieldValue('password') === value) { return Promise.resolve(); } return Promise.reject(new Error('The two passwords do not match!')); }, }), ]} > <Input.Password placeholder="Confirm Password" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" loading={loading}> Register </Button> </Form.Item> </Form> ); }; export default Register; ``` 在这里我们使用了 `axios` 来发送登录和注册的请求，需要注意的是，这里的请求地址是 `/api/login` 和 `/api/register`，而不是实际的后端接口地址，根据实际情况进行修改。 最后在需要展示登录和注册功能的页面中引入 `Login` 和 `Register` 组件即可。 ```jsx import React from 'react'; import Login from './Login'; import Register from './Register'; const LoginPage = () => { return ( <div> <h1>Login</h1> <Login /> <hr /> <h1>Register</h1> <Register /> </div> ); }; export default LoginPage; ``` 以上就是一个简单的使用 `react` 和 `antd` 实现登录和注册功能的示例代码，希望对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值