基于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相关推荐

  1. antd modal 拖动_Antd Modal 实现拖动功能

    思路: 1.首先需要两个DIV,一个是和视口一样大的drag-mask,绑定mouseMove事件和mouseUp事件,用来作为拖拽参照:另一个是和Modal一样大的drag-target,绑定mou ...

  2. react 引入antd 样式_react引入antd组件

    1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...

  3. antd modal 拖动_Ant-design Modal实现可以拖动的效果

    最近项目组在开发的时候提出了一个需求,需要让 ant-design Modal实现能够拖动的功能,研究了一番,基于 and-design Modal自己封装了一个antd-draggable-moda ...

  4. antd modal 拖动_antd的Modal可移动(可拖拽)

    通过第三方插件实现 使用方法: npm install dragm -S 2.安装后运行如果出现缺少.less,则在命令行>yarn install(或直接运行 yarn),然后再运行 3.新建 ...

  5. java antd实现登录,基于 antd pro 的短信验证码登录

    概要 整体流程 前端 页面代码 请求验证码和登录的 service (src/services/login.js) 处理登录的 model (src/models/login.js) 后端 短信验证码 ...

  6. flutter 拖拽布局_Flutter 史上最牛拖动控件 Draggable

    不多说,我们肯定遇到过这个需求: 把一个控件从当前位置移动到另一个位置.可能需求最多的就像是支付宝应用页面的编辑: 比如,我想把最近使用的 红包 添加到 我的应用 当中,支付宝这里是用的 + 号. 那 ...

  7. 【Antd Design Upload】 antd Upload 上传时只有Uploading状态,无法获取返回的数据

    问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...

  8. antd pro项目中 antd Upload组件 基于 lrz 在上传前做图片压缩

    lrz npm和参数文档可供参考 import { Upload,Button} from 'antd'; import lrz from 'lrz';//处理函数 function compress ...

  9. antd pro使用ajax,antd在线换肤定制功能

    最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了. css换肤 入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过 这 ...

最新文章

  1. 波音公司计划利用 3D 打印技术制作模块化卫星
  2. 2021物理大事汇:μ子磁性异常,时间晶体现身,天体物理大丰收
  3. c# 对象json互相转换_C#匿名对象(转JSON)互转、动态添加属性
  4. 《ASP.NET MVC企业实战》(二) MVC开发前奏
  5. 博士申请 | 哥本哈根大学招收机器学习和信息检索全奖博士生(年薪34万)
  6. 安装angular cli_Angular 9适用于初学者—如何使用Angular CLI安装第一个应用程序
  7. SpringCloud工作笔记047---FastJson解析多级JSON_FastJson解析嵌套JSON_FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换
  8. Linux expect脚本使用详细说明及示例
  9. 新MacBook Pro软件安装记录
  10. Ubutun16.04安装和使用daemontools
  11. 精益数据分析 - 第15章 阶段1:移情
  12. 特异度(specificity)与灵敏度(sensitivity)
  13. VS2019使用Mini-Filter
  14. Duckduckgo搜索引擎
  15. 基于android的交流平台,参阅:基于android的大学生信息交流平台的设计与实现
  16. xshell、CRT上使用vbscript更高效连接定位到服务器以及目录、数据库
  17. sco的意思_HIV检测中的SCO值意义-3页word资料
  18. 类型体操的9种类型运算、4种类型套路总结
  19. js将阿拉伯数字翻译成中文的大写数字
  20. JavaScript键盘事件常见用法实例分析

热门文章

  1. PDU发送短信 事例
  2. ubuntu ldconfig
  3. 到底什么样的人可以做外贸?
  4. python token验证失败百分百解决_Token验证失败的解决方法
  5. 【z变换】1. z变换
  6. Halcon 中实现 Otsu 算法
  7. 高颜值的第三方网易云播放器—YesPlayerMusic
  8. 电商平台-支付模块的设计与架构
  9. 计算机分组交换的优点缺点,分组交换的特点_分组交换的优缺点
  10. 探讨css中repaint和reflow