Popup 弹出层

从顶部或底部浮出的模态框 (会打断用户操作)

代码演示

向下弹出效果

Popup 向下弹出效果

  1. import { Popup, List, Button, InputItem } from 'antd-mobile';
  2. class PopupContent extends React.Component {
  3. state = {
  4. sel: '',
  5. };
  6. onSel = (sel) => {
  7. this.setState({ sel });
  8. this.props.onClose();
  9. };
  10. render() {
  11. return (
  12. <List renderHeader={() => `账户总览,选择了:${this.state.sel}`}>
  13. <List.Item
  14. thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
  15. onClick={() => { this.onSel('东吴证券'); }}
  16. >东吴证券</List.Item>
  17. <List.Item
  18. thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
  19. onClick={() => { this.onSel('西吴证券'); }}
  20. >西吴证券</List.Item>
  21. <InputItem value={this.state.val} onChange={val => this.setState({ val })}>输入内容</InputItem>
  22. </List>
  23. );
  24. }
  25. }
  26. const Test = () => {
  27. const onMaskClose = () => {
  28. console.log('onMaskClose');
  29. // also support Promise
  30. // return new Promise((resolve) => {
  31. // console.log('1000ms 后关闭');
  32. // setTimeout(resolve, 1000);
  33. // });
  34. };
  35. const onClick = (e) => {
  36. e.preventDefault(); // 修复 Android 上点击穿透
  37. Popup.show(<PopupContent onClose={() => Popup.hide()} />, { onMaskClose });
  38. };
  39. // newInstance() {
  40. // const ins = Popup.newInstance();
  41. // ins.show(<Button onClick={() => ins.hide()}>关闭</Button>);
  42. // },
  43. return (
  44. <div style={{ padding: '0.3rem' }}>
  45. <Button onClick={onClick}>显示</Button>
  46. </div>
  47. );
  48. };
  49. ReactDOM.render(<Test />, mountNode);

向上弹出效果

Popup 向上弹出效果

  1. import { Popup, List, Button, Icon } from 'antd-mobile';
  2. // fix touch to scroll background page on iOS
  3. // https://github.com/ant-design/ant-design-mobile/issues/307
  4. // https://github.com/ant-design/ant-design-mobile/issues/163
  5. const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
  6. let maskProps;
  7. if (isIPhone) {
  8. // Note: the popup content will not scroll.
  9. maskProps = {
  10. onTouchStart: e => e.preventDefault(),
  11. };
  12. }
  13. class Test extends React.Component {
  14. state = {
  15. sel: '',
  16. };
  17. renderHeader = () => (
  18. <div style={{ position: 'relative' }}>
  19. 委托买入
  20. <span
  21. style={{
  22. position: 'absolute', right: 3, top: -5,
  23. }}
  24. onClick={() => this.onClose('cancel')}
  25. >
  26. <Icon type="cross" />
  27. </span>
  28. </div>
  29. );
  30. onClick = () => {
  31. Popup.show(<div>
  32. <List renderHeader={this.renderHeader}
  33. className="popup-list"
  34. >
  35. {['股票名称', '股票代码', '买入价格', '买入数量', '更多', '更多'].map((i, index) => (
  36. <List.Item key={index}>{i}</List.Item>
  37. ))}
  38. </List>
  39. <ul style={{ padding: '0.18rem 0.3rem', listStyle: 'none' }}>
  40. <li>投资说明投资说明...</li>
  41. <li style={{ marginTop: '0.18rem' }}>
  42. <Button type="primary" onClick={() => this.onClose('cancel')}>买入</Button>
  43. </li>
  44. </ul>
  45. </div>, { animationType: 'slide-up', maskProps, maskClosable: false });
  46. };
  47. onClose = (sel) => {
  48. this.setState({ sel });
  49. Popup.hide();
  50. };
  51. render() {
  52. return (<div style={{ padding: '0.3rem' }}>
  53. <Button onClick={this.onClick}>显示</Button>
  54. </div>);
  55. }
  56. }
  57. ReactDOM.render(<Test />, mountNode);
  1. .popup-list .am-list-body {
  2. height: 4.2rem;
  3. overflow: auto;
  4. }

Popup弹出层 - 图1

API

适用平台:WEB、React-Native

static show(content: React.Element, options: Object):

options可选项:

  • animationType (string) - 可选 slide-down (默认)、slide-up 弹出动画类型

  • transitionName (string) (web only) 自定义显示隐藏变换动画

  • maskTransitionName (string) (web only) 自定义遮罩层变换动画

  • onMaskClose (function) 遮罩层关闭时的回调,支持返回 Promise

  • maskClosable (bool) - 点击蒙层是否允许关闭,默认允许

对于 web 平台,你还可以设置 prefixCls/className/wrapClassName/maskStyle,参考 rc-dialog#### static hide(): 关闭 Popup##### static newInstance() (web only)#有些情况下,页面需要多处出现 Popup ,比如在 Popup 里再产生 Popup。 这个函数会返回 Popup 实例对象,对象成员包括:
  • show (function) - 同 static show

  • hide (function) - 同 static hide