Dialog 弹窗

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

使用指南

对话框

何时使用

对话框是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。

API

弹窗

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
title对话框的标题any-
footer传入底部的内容Boolean/String/ReactNode-
footerAlign底部按钮的对齐方式可选值:'left', 'center', 'right'Enum'right'
visible控制对话框是否可见Boolean-
hasMask是否需要maskBooleantrue
closable'esc, mask, close', 详见closableString/Boolean'esc,close'
shouldUpdatePosition是否强制更新dialog的位置，在isFullScreen为true且align为cc cc的时候无效Boolean-
align浮层自定义位置String/Number'cc cc'
animation配置动画的播放方式Object/Boolean{ in: 'fadeInDown', out: 'fadeOutUp' }
onClose在点击关闭按钮的时候触发的函数签名:Function() => voidFunction-
afterClose浮层关闭后触发的事件, 如果有动画，则在动画结束后触发签名:Function() => voidFunction-
onOk在点击Ok按钮的时候触发的函数签名:Function() => voidFunction() => {}
onCancel在点击Cancel按钮的时候触发的函数签名:Function() => voidFunction() => {}
minMargin当dialog过高的时候距离viewport的最小边距,在isFullScreen下无效。Number40
autoFocus当dialog弹出的时候是否自动获取焦点Booleantrue
locale自定义国际化文案对象属性:ok: {String} 确认按钮文案cancel: {String} 取消按钮文案Object-
language自定义国际化语言可选值:'en-us', 'zh-cn', 'zh-tw'Enum-
isFullScreen是否是启用使用CSS定位模式的对话框, 在该模式下面无需通过shouldUpdatePosition来进行重新定位。Booleanfalse

代码示例

对齐方式

通过footerAlign调整底部按钮的对齐方式

Dialog 弹窗 - 图1

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. class App extends React.Component {
  4.   state = {
  5.     footerAlign: "left",
  6.     visible: false
  7.   };
  8.   map = ["left", "right", "center"];
  10.   onClose = () => {
  11.     this.setState({
  12.       visible: false
  13.     });
  14.   };
  16.   onClick = () => {
  17.     let { footerAlign } = this.state,
  18.       index = this.map.indexOf(footerAlign),
  19.       next = index + 1;
  21.     if (next >= this.map.length) {
  22.       next = 0;
  23.     }
  24.     this.setState({
  25.       footerAlign: this.map[next]
  26.     });
  27.   };
  29.   onOpen = () => {
  30.     this.setState({
  31.       visible: true
  32.     });
  33.   };
  35.   render() {
  36.     return (
  37.       <span>
  38.         <Button onClick={this.onOpen} type="primary">
  39.           Open dialog
  40.         </Button>
  41.         <Dialog
  42.           visible={this.state.visible}
  43.           onOk={this.onClose}
  44.           onCancel={this.onClose}
  45.           onClose={this.onClose}
  46.           title="Welcome to Alibaba.com"
  47.           footerAlign={this.state.footerAlign}
  48.         >
  49.           <Button onClick={this.onClick} type="primary">
  50.             Modify footerAlign
  51.           </Button>
  53.           <h3>Your one-stop communication tool!</h3>
  54.           <ul>
  55.             <li>View messages from buyers & suppliers</li>
  56.             <li>Negotiate the details of your order</li>
  57.           </ul>
  58.         </Dialog>
  59.       </span>
  60.     );
  61.   }
  62. }
  64. ReactDOM.render(<App />, mountNode);

基本

第一个对话框

Dialog 弹窗 - 图2

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. class App extends React.Component {
  4.   state = {
  5.     visible: false
  6.   };
  8.   render() {
  9.     return (
  10.       <span>
  11.         <Button onClick={this.onOpen} type="primary">
  12.           Open dialog
  13.         </Button>
  14.         <Dialog
  15.           visible={this.state.visible}
  16.           onOk={this.onClose}
  17.           closable="esc,mask,close"
  18.           onCancel={this.onClose}
  19.           onClose={this.onClose}
  20.           title="Alibaba.com"
  21.         >
  22.           <h3>Your one-stop communication tool!</h3>
  23.           <ul>
  24.             <li>View messages from buyers & suppliers</li>
  25.             <li>Negotiate the details of your order</li>
  26.           </ul>
  27.         </Dialog>
  28.       </span>
  29.     );
  30.   }
  32.   onOpen = () => {
  33.     this.setState({
  34.       visible: true
  35.     });
  36.   };
  38.   onClose = () => {
  39.     this.setState({
  40.       visible: false
  41.     });
  42.   };
  43. }
  45. ReactDOM.render(<App />, mountNode);

自定义底部

默认的footer为两个按钮，你可以自定义footer的内容

Dialog 弹窗 - 图3

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. class App extends React.Component {
  4.   state = {
  5.     visible: false
  6.   };
  8.   render() {
  9.     const footer = (
  10.       <a onClick={this.onClose} href="javascript:;">
  11.         Close
  12.       </a>
  13.     );
  14.     return (
  15.       <span>
  16.         <Button onClick={this.onOpen} type="primary">
  17.           Open dialog
  18.         </Button>
  19.         <Dialog
  20.           visible={this.state.visible}
  21.           footer={footer}
  22.           onClose={this.onClose}
  23.           title="Alibaba.com"
  24.         >
  25.           <h3>Your one-stop communication tool!</h3>
  26.           <ul>
  27.             <li>View messages from buyers & suppliers</li>
  28.             <li>Negotiate the details of your order</li>
  29.           </ul>
  30.         </Dialog>
  31.       </span>
  32.     );
  33.   }
  35.   onOpen = () => {
  36.     this.setState({
  37.       visible: true
  38.     });
  39.   };
  41.   onClose = () => {
  42.     this.setState({
  43.       visible: false
  44.     });
  45.   };
  46. }
  48. ReactDOM.render(<App />, mountNode);

FullScreen模式

设置isFullScreen为true的时候，无需通过shouldUpdatePosition进行重新定位。

Dialog 弹窗 - 图4

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. const content = <p>View messages from buyers & suppliers</p>;
  5. const largeContent = [];
  7. for (let i = 0; i < 10; i++) {
  8.   largeContent.push(
  9.     <span key={i}>
  10.       <h3>Your one-stop communication tool!</h3>
  11.       <ul>
  12.         <li>View messages from buyers & suppliers</li>
  13.         <li>Negotiate the details of your order</li>
  14.       </ul>
  15.     </span>
  16.   );
  17. }
  19. class App extends React.Component {
  20.   state = {
  21.     visible: false,
  22.     content
  23.   };
  25.   render() {
  26.     return (
  27.       <span>
  28.         <Button onClick={this.onOpen} type="primary">
  29.           Open Dialog
  30.         </Button>
  31.         <Dialog
  32.           visible={this.state.visible}
  33.           onOk={this.onClose}
  34.           onCancel={this.onClose}
  35.           isFullScreen
  36.           onClose={this.onClose}
  37.           title="Alibaba.com"
  38.         >
  39.           <Button type="primary" onClick={this.modifyContent}>
  40.             Modify content.
  41.           </Button>
  42.           {this.state.content}
  43.         </Dialog>
  44.       </span>
  45.     );
  46.   }
  48.   onOpen = () => {
  49.     this.setState({
  50.       visible: true
  51.     });
  52.   };
  54.   onClose = () => {
  55.     this.setState({
  56.       visible: false,
  57.       content
  58.     });
  59.   };
  61.   modifyContent = () => {
  62.     this.setState({
  63.       content: largeContent
  64.     });
  65.   };
  66. }
  68. ReactDOM.render(<App />, mountNode);

内容较多的dialog

内容很多的情况，可以通过minMargin控制边距

Dialog 弹窗 - 图5

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. const content = [];
  5. for (let i = 0; i < 10; i++) {
  6.   content.push(
  7.     <span key={i}>
  8.       <h3>Your one-stop communication tool!</h3>
  9.       <ul>
  10.         <li>View messages from buyers & suppliers</li>
  11.         <li>Negotiate the details of your order</li>
  12.       </ul>
  13.     </span>
  14.   );
  15. }
  17. class App extends React.Component {
  18.   state = {
  19.     visible: false
  20.   };
  22.   render() {
  23.     return (
  24.       <span>
  25.         <Button onClick={this.onOpen} type="primary">
  26.           Open dialog
  27.         </Button>
  28.         <Dialog
  29.           visible={this.state.visible}
  30.           onOk={this.onClose}
  31.           onCancel={this.onClose}
  32.           shouldUpdatePosition
  33.           minMargin={50}
  34.           onClose={this.onClose}
  35.           title="Alibaba.com"
  36.         >
  37.           {content}
  38.         </Dialog>
  39.       </span>
  40.     );
  41.   }
  43.   onOpen = () => {
  44.     this.setState({
  45.       visible: true
  46.     });
  47.   };
  49.   onClose = () => {
  50.     this.setState({
  51.       visible: false,
  52.       content
  53.     });
  54.   };
  55. }
  57. ReactDOM.render(<App />, mountNode);

语言

示例演示了在便捷调用和JSX模式下的语言切换方式

Dialog 弹窗 - 图6

查看源码在线预览

  1. import { Dialog, Button, LocaleProvider } from "@icedesign/base";
  3. const popupConfirm = () => {
  4.   Dialog.confirm({
  5.     content: "confirm",
  6.     locale: {
  7.       ok: "确认",
  8.       cancel: "取消"
  9.     }
  10.   });
  11. };
  13. class App extends React.Component {
  14.   state = {
  15.     visible: false
  16.   };
  18.   render() {
  19.     return (
  20.       <span>
  21.         <Button type="primary" onClick={this.onOpen}>
  22.           Use en-us Open
  23.         </Button>
  24.         <Dialog
  25.           visible={this.state.visible}
  26.           onOk={this.onClose}
  27.           onCancel={this.onClose}
  28.           onClose={this.onClose}
  29.           title="Alibaba.com"
  30.         >
  31.           <h3>Your one-stop communication tool!</h3>
  32.           <ul>
  33.             <li>View messages from buyers & suppliers</li>
  34.             <li>Negotiate the details of your order</li>
  35.           </ul>
  36.         </Dialog>
  37.       </span>
  38.     );
  39.   }
  41.   onOpen = () => {
  42.     LocaleProvider.set("en-us");
  43.     this.setState({
  44.       visible: true
  45.     });
  46.   };
  47.   onClose = () => {
  48.     this.setState({
  49.       visible: false
  50.     });
  51.   };
  52. }
  54. ReactDOM.render(
  55.   <span>
  56.     <Button onClick={popupConfirm}>Confirm</Button>
  57.     &nbsp;
  58.     <App />
  59.   </span>,
  60.   mountNode
  61. );

层叠对话框

多个对话框展示。

Dialog 弹窗 - 图7

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. class App extends React.Component {
  4.   state = {
  5.     visible: false
  6.   };
  8.   render() {
  9.     return (
  10.       <span>
  11.         <Button onClick={this.onOpen} type="primary">
  12.           Open Dialog
  13.         </Button>
  14.         <Dialog
  15.           visible={this.state.visible}
  16.           onOk={this.onClose}
  17.           onCancel={this.onClose}
  18.           onClose={this.onClose}
  19.           title="Alibaba.com"
  20.         >
  21.           <h3>Your one-stop communication tool!</h3>
  22.           <ul>
  23.             <li>View messages from buyers & suppliers</li>
  24.             <li>Negotiate the details of your order</li>
  25.           </ul>
  26.           <App />
  27.         </Dialog>
  28.       </span>
  29.     );
  30.   }
  32.   onOpen = () => {
  33.     this.setState({
  34.       visible: true
  35.     });
  36.   };
  38.   onClose = () => {
  39.     this.setState({
  40.       visible: false
  41.     });
  42.   };
  43. }
  45. ReactDOM.render(<App />, mountNode);

延迟关闭

在使用alert和confirm的时候，返回promise,可以延迟执行函数

Dialog 弹窗 - 图8

查看源码在线预览

  1. import { Button, Dialog } from "@icedesign/base";
  3. const popupConfirm = () => {
  4.   Dialog.confirm({
  5.     content: "confirm",
  6.     onOk: () => {
  7.       return new Promise(resolve => {
  8.         setTimeout(resolve, 2000);
  9.       });
  10.     }
  11.   });
  12. };
  14. ReactDOM.render(
  15.   <span>
  16.     <Button onClick={popupConfirm} type="primary">
  17.       confirm
  18.     </Button>
  19.   </span>,
  20.   mountNode
  21. );

简单确认框

Dialog提供alert和confirm两种方式进行便捷调用

Dialog 弹窗 - 图9

查看源码在线预览

  1. import { Dialog, Button, LocaleProvider } from "@icedesign/base";
  3. const popupAlert = () => {
  4.   Dialog.alert({
  5.     content: "Alert content",
  6.     closable: false,
  7.     title: "Alert",
  8.     onOk: () => {
  9.       Dialog.alert({ content: "alert content" });
  10.     }
  11.   });
  12. };
  14. const popupConfirm = () => {
  15.   Dialog.confirm({
  16.     content: "Confirm content",
  17.     title: "Confirm"
  18.   });
  19. };
  21. const setLocale = () => {
  22.   LocaleProvider.set("en-us");
  23. };
  25. const popupCustomize = () => {
  26.   const dialog = Dialog.alert({
  27.     needWrapper: false,
  28.     content: "Alert content",
  29.     title: "Alert",
  30.     footer: (
  31.       <Button type="primary" onClick={() => dialog.hide()}>
  32.         Another button
  33.       </Button>
  34.     )
  35.   });
  36. };
  38. ReactDOM.render(
  39.   <span>
  40.     <Button onClick={setLocale}>Set Locale</Button> &nbsp;
  41.     <Button onClick={popupAlert}>Alert</Button> &nbsp;
  42.     <Button onClick={popupConfirm}>Confirm</Button> &nbsp;
  43.     <Button onClick={popupCustomize}>Customize content & button</Button>
  44.   </span>,
  45.   mountNode
  46. );

简单确认框

通过shouldUpdatePosition更新对话框的位置

Dialog 弹窗 - 图10

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. const content = <p>View messages from buyers & suppliers</p>;
  5. class App extends React.Component {
  6.   state = {
  7.     visible: false,
  8.     content
  9.   };
  11.   render() {
  12.     return (
  13.       <span>
  14.         <Button onClick={this.onOpen} type="primary">
  15.           Open Dialog
  16.         </Button>
  17.         <Dialog
  18.           visible={this.state.visible}
  19.           onOk={this.onClose}
  20.           onCancel={this.onClose}
  21.           shouldUpdatePosition
  22.           onClose={this.onClose}
  23.           title="Alibaba.com"
  24.         >
  25.           <Button type="primary" onClick={this.modifyContent}>
  26.             Modify content.
  27.           </Button>
  28.           {this.state.content}
  29.         </Dialog>
  30.       </span>
  31.     );
  32.   }
  34.   onOpen = () => {
  35.     this.setState({
  36.       visible: true
  37.     });
  38.   };
  40.   onClose = () => {
  41.     this.setState({
  42.       visible: false,
  43.       content
  44.     });
  45.   };
  47.   modifyContent = () => {
  48.     this.setState({
  49.       content: (
  50.         <div>
  51.           <h3>Your one-stop communication tool!</h3>
  52.           <ul>
  53.             <li>View messages from buyers & suppliers</li>
  54.             <li>Negotiate the details of your order</li>
  55.           </ul>
  56.         </div>
  57.       )
  58.     });
  59.   };
  60. }
  62. ReactDOM.render(<App />, mountNode);

设置宽度等样式

通过style设置dialog的宽度或者top等样式

Dialog 弹窗 - 图11

查看源码在线预览

  1. import { Dialog, Button } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       visible: false,
  8.       align: "cc cc",
  9.       style: {
  10.         width: "80%"
  11.       }
  12.     };
  13.   }
  15.   render() {
  16.     return (
  17.       <span>
  18.         <Button onClick={this.open.bind(this)} type="primary">
  19.           Open dialog
  20.         </Button>
  21.         <Dialog
  22.           visible={this.state.visible}
  23.           onOk={this.onClose.bind(this)}
  24.           onCancel={this.onClose.bind(this)}
  25.           onClose={this.onClose.bind(this)}
  26.           title="Welcome to Alibaba.com"
  27.           style={this.state.style}
  28.           align={this.state.align}
  29.         >
  30.           <h3>Your one-stop communication tool!</h3>
  31.           <ul>
  32.             <li>View messages from buyers & suppliers</li>
  33.             <li>Negotiate the details of your order</li>
  34.           </ul>
  35.           <Button onClick={this.setPosition.bind(this)}>Set position</Button>
  36.         </Dialog>
  37.       </span>
  38.     );
  39.   }
  41.   onClose() {
  42.     this.setState({
  43.       visible: false
  44.     });
  45.   }
  47.   open() {
  48.     this.setState({
  49.       visible: true
  50.     });
  51.   }
  53.   setPosition() {
  54.     this.setState({
  55.       align: false,
  56.       style: {
  57.         top: "10px"
  58.       }
  59.     });
  60.   }
  61. }
  63. ReactDOM.render(<App />, mountNode);

相关区块

Dialog 弹窗 - 图12

暂无相关区块