drag-modal-lhx

A dragable modal based on Modal of antd

Usage no npm install needed!

<script type="module">
  import dragModalLhx from 'https://cdn.skypack.dev/drag-modal-lhx';
</script>

README

dragModal

  • 说明

dragModal基于antd Modal开发,所有api和使用方法和antd Modal一致,仅额外添加拖拽功能

  • 安装
npm install drag-modal
  • 额外参数

saveDistance: 边界限定,限定浮框超出边界后,最少需保留的宽度,默认80

  • 使用
import React from "react";
import ReactDOM from "react-dom";
import Modal from "../../src/index";
import "antd/dist/antd.css";

class App extends React.Component {
  state = {
    visible: false
  };
  onCancel = () => {
    this.setState({
      visible: false
    });
  };
  showModal = () => {
    this.setState({
      visible: true
    });
  };
  render() {
    return (
      <div className="App">
        <button style={{ marginTop: "20px" }} onClick={this.showModal}>
          开启
        </button>
        <Modal
          onCancel={this.onCancel}
          title="可拖拽浮框"
          visible={this.state.visible}
          cancelText="关闭"
          okText="确定"
          onOk={this.onCancel}
          saveDistance={150}
        >
          试试拖动标题
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在sandBox上在线调试