rc-dialog使用简介

来源：互联网发布：全景图合成软件编辑：程序博客网时间：2024/05/22 20:34

今天介绍一个比较好用的react弹出框控件rc-dialog(貌似是某宝制作的react弹出框控件)

rc-dialog的github网址：https://github.com/react-component/dialog

rc-dialog的功能如下图所示：

特点：1.平滑的弹出特效 2.弹出位置可以自由调整 3.具有键盘键位支持如ESC关闭Dialog等

那么，就让我们一步步实现上图中日期控件以及相关功能

第一步：安装rc-dialog

打开控制台，然后执行npm install rc-dialog

第二步：在页面中加入rc-dialog依赖

1.创建文件dialog.jsx

2.加入rc-dialog组件依赖

var React=require('react');var Link= require('react-router').Link;var IndexLink=require('react-router').IndexLink;var Tree=require('./tree.jsx').Tree;var Dialog=require('rc-dialog');

3.加入rc-dialog样式依赖，也可以单独把rc-dialog中的index.css提取出来，加在index.html中，方便调试。

require('rc-dialog/assets/index.css');

第三步：开始编码

var React=require('react');var Link= require('react-router').Link;var IndexLink=require('react-router').IndexLink;var Tree=require('./tree.jsx').Tree;var Dialog=require('rc-dialog');var Mydialog = React.createClass({    getInitialState() {        return {            visible: false,            width: 600,            destroyOnClose: false,            center: true        };    },    //点击弹出方法    onClick:function(e){        this.setState({            mousePosition: {                x: e.pageX,                y: e.pageY            },            visible: true        });    },    //关闭时方法    onClose(e) {        // console.log(e);        this.setState({            visible: false        });    },    render : function(){        var title="React弹出框";        const style = {width: this.state.width};        let wrapClassName = '';        if (this.state.center) {            wrapClassName = 'center';        }        var dialog=(<Dialog title={title} onClose={this.onClose}                            animation="zoom"                            maskAnimation="fade"                            style={style}                            wrapClassName={wrapClassName}                            visible={this.state.visible}                            mousePosition={this.state.mousePosition}>                        <Tree />                    </Dialog>);        return (            <div style={{ width: '90%', margin: '0 auto' }}>                <style>                    {                        `                        .center {                          display: flex;                          align-items: center;                          justify-content: center;                        }                        `                    }                </style>                {dialog}                <div><button className="btn btn-primary" onClick={this.onClick}>点击弹出Dialog</button></div>            </div>        );    }})exports.Dialog=Mydialog;

0 0