UI Views - Popup弹出层 - 《Ant Design Mobile v0.8.x 组件文档》

Popup 弹出层
- 规则
代码演示
API

从顶部或底部浮出的模态，提供标题和关闭按钮，展示和当前内容相关的信息或提供相关操作。

规则

提供清晰的关闭按钮。
Popup 会打断用户操作，所以用在重要的时候， eg.买入股票。

代码演示

Popup 向下弹出效果

import { Popup, List, Button, Menu } from 'antd-mobile';
const SelectorDataForPopup = [
  {
    label: '中餐',
    value: '21',
  }, {
    label: '还没生效',
    value: '22',
    disabled: true,
  }, {
    label: '关闭浮层',
    value: 'qx',
  }, {
    label: '自助餐',
    value: '24',
  }, {
    label: '快餐',
    value: '25',
  }, {
    label: '小吃',
    value: '26',
  },
];
const Test = React.createClass({
  getInitialState() {
    return {
      sel: '',
    };
  },
  onClick() {
    Popup.show(
      <List title="账户总览 (已绑定3个）">
        <List.Body>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            onClick={() => { this.onClose('cancel'); }}
          >东吴证券 (5728）</List.Item>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
            onClick={() => { this.onClose('cancel'); }}
          >东吴证券 (5728）</List.Item>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
            arrow="horizontal"
            onClick={() => { this.onClose('opt 1'); }}
          >更多</List.Item>
        </List.Body>
      </List>
    );
  },
  onClose(sel) {
    if (sel === 'opt 1') {
      this.newInstance();
      return;
    }
    this.setState({ sel });
    Popup.hide();
  },
  newInstance() {
    const ins = Popup.newInstance();
    const hide = (value) => {
      if (value[0] === 'qx') {
        ins.hide();
      }
    };
    ins.show(<Menu
      level={1}
      value={[SelectorDataForPopup[0]]}
      data={SelectorDataForPopup}
      onChange={hide}
    />, { maskClosable: false });
  },
  render() {
    return (<div style={{ padding: '15px' }}>
      <Button type="ghost" onClick={this.onClick}>显示</Button>
    </div>);
  },
});
ReactDOM.render(<Test />, mountNode);

向上弹出效果

Popup 向上弹出效果

import { Popup, List, Button } from 'antd-mobile';
const Test = React.createClass({
  getInitialState() {
    return {
      sel: '',
    };
  },
  onClick() {
    Popup.show(<div>
      <List title={
        <div style={{ position: 'relative' }}>
          委托买入
          <span style={{
            position: 'absolute', right: 3, top: -5, fontSize: '1.4em',
          }} onClick={() => this.onClose('cancel')}
          >x</span>
        </div>
      }>
        <List.Body>
          <List.Item>股票名称</List.Item>
          <List.Item>股票代码</List.Item>
          <List.Item>买入价格</List.Item>
          <List.Item>买入数量</List.Item>
        </List.Body>
      </List>
      <ul style={{ padding: 10 }}>
        <li>投资说明投资说明...</li>
        <li style={{ marginTop: 10 }}>
          <Button type="primary" onClick={() => this.onClose('cancel')}>买入</Button>
        </li>
      </ul>
    </div>, { animationType: 'slide-up' });
  },
  onClose(sel) {
    this.setState({ sel });
    Popup.hide();
  },
  render() {
    return (<div style={{ padding: '15px' }}>
      <Button type="ghost" onClick={this.onClick}>显示</Button>
    </div>);
  },
});
ReactDOM.render(<Test />, mountNode);