antd modal 拖动_Package - antd-draggable-modal
基于Ant-design的可以拖拽的Modal
基于Ant-design的可以拖拽的Modal
特性:
支持弹出窗居中打开
支持拖拽 title bar 实现拖拽
支持多层弹窗拖拽
安装:
$ yarn add antd-draggable-modal
用法:
import React, { Component } from 'react';
import { Button } from 'antd';
import AntdDraggableModal from 'antd-draggable-modal';
class Index extends Component {
state = {
visible: false,
visible2: false,
}
handleVisible = visible => {
this.setState({
visible,
});
}
handleOk = () => {
this.handleVisible(false);
}
handleCancel = () => {
this.handleVisible(false);
}
render() {
return (
<>
this.handleVisible(true)}>打开弹窗
{this.state.visible && (
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
Some contents...
Some contents...
Some contents...
this.setState({ visible2: true })}>打开弹窗2
)}
{this.state.visible2 && (
title="Basic Modal2"
visible={this.state.visible2}
onOk={() => this.setState({ visible2: false })}
onCancel={() => this.setState({ visible2: false })}
>
Some contents...
Some contents...
Some contents...
)}
>
);
}
}
export default Index;
Current Tags
0.1.7 ... latest (a year ago)
8 Versions
0.1.7 ... a year ago
0.1.6 ... a year ago
0.1.5 ... a year ago
0.1.4 ... a year ago
0.1.3 ... a year ago
0.1.2 ... a year ago
0.1.1 ... a year ago
0.1.0 ... a year ago
antd modal 拖动_Package - antd-draggable-modal相关推荐
- antd modal 拖动_Antd Modal 实现拖动功能
思路: 1.首先需要两个DIV,一个是和视口一样大的drag-mask,绑定mouseMove事件和mouseUp事件,用来作为拖拽参照:另一个是和Modal一样大的drag-target,绑定mou ...
- react 引入antd 样式_react引入antd组件
1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...
- antd modal 拖动_Ant-design Modal实现可以拖动的效果
最近项目组在开发的时候提出了一个需求,需要让 ant-design Modal实现能够拖动的功能,研究了一番,基于 and-design Modal自己封装了一个antd-draggable-moda ...
- antd modal 拖动_antd的Modal可移动(可拖拽)
通过第三方插件实现 使用方法: npm install dragm -S 2.安装后运行如果出现缺少.less,则在命令行>yarn install(或直接运行 yarn),然后再运行 3.新建 ...
- java antd实现登录,基于 antd pro 的短信验证码登录
概要 整体流程 前端 页面代码 请求验证码和登录的 service (src/services/login.js) 处理登录的 model (src/models/login.js) 后端 短信验证码 ...
- flutter 拖拽布局_Flutter 史上最牛拖动控件 Draggable
不多说,我们肯定遇到过这个需求: 把一个控件从当前位置移动到另一个位置.可能需求最多的就像是支付宝应用页面的编辑: 比如,我想把最近使用的 红包 添加到 我的应用 当中,支付宝这里是用的 + 号. 那 ...
- 【Antd Design Upload】 antd Upload 上传时只有Uploading状态,无法获取返回的数据
问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...
- antd pro项目中 antd Upload组件 基于 lrz 在上传前做图片压缩
lrz npm和参数文档可供参考 import { Upload,Button} from 'antd'; import lrz from 'lrz';//处理函数 function compress ...
- antd pro使用ajax,antd在线换肤定制功能
最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了. css换肤 入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过 这 ...
最新文章
- 波音公司计划利用 3D 打印技术制作模块化卫星
- 2021物理大事汇:μ子磁性异常,时间晶体现身,天体物理大丰收
- c# 对象json互相转换_C#匿名对象(转JSON)互转、动态添加属性
- 《ASP.NET MVC企业实战》(二) MVC开发前奏
- 博士申请 | 哥本哈根大学招收机器学习和信息检索全奖博士生(年薪34万)
- 安装angular cli_Angular 9适用于初学者—如何使用Angular CLI安装第一个应用程序
- SpringCloud工作笔记047---FastJson解析多级JSON_FastJson解析嵌套JSON_FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换
- Linux expect脚本使用详细说明及示例
- 新MacBook Pro软件安装记录
- Ubutun16.04安装和使用daemontools
- 精益数据分析 - 第15章 阶段1:移情
- 特异度(specificity)与灵敏度(sensitivity)
- VS2019使用Mini-Filter
- Duckduckgo搜索引擎
- 基于android的交流平台,参阅:基于android的大学生信息交流平台的设计与实现
- xshell、CRT上使用vbscript更高效连接定位到服务器以及目录、数据库
- sco的意思_HIV检测中的SCO值意义-3页word资料
- 类型体操的9种类型运算、4种类型套路总结
- js将阿拉伯数字翻译成中文的大写数字
- JavaScript键盘事件常见用法实例分析