Popover 气泡

规则

• 通过点击背景的任一位置，进行退出。

代码演示

Popover

import { Popover, NavBar, Icon } from 'antd-mobile';
const Item = Popover.Item;
const App = React.createClass({
  getInitialState() {
    return {
      visible: true,
      selected: '',
    };
  },
  onSelect(opt) {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  },
  handleVisibleChange(visible) {
    this.setState({
      visible,
    });
  },
  render() {
    let offsetX = -10; // just for pc demo
    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
      offsetX = -30;
    }
    return (<div>
      <NavBar iconName={false} rightContent={
        <Popover mask
          visible={this.state.visible}
          overlay={[
            (<Item key="4" value="scan" iconName="scan" data-seed="logId">扫一扫</Item>),
            (<Item key="5" value="special" iconName="qrcode" style={{ whiteSpace: 'nowrap' }}>我的二维码</Item>),
            (<Item key="6" value="button ct" iconName="question-circle-o">
              <span style={{ marginRight: 5 }}>帮助</span>
            </Item>),
          ]}
          popupAlign={{
            overflow: { adjustY: 0, adjustX: 0 },
            offset: [offsetX, 15],
          }}
          onVisibleChange={this.handleVisibleChange}
          onSelect={this.onSelect}
        >
          <div style={{
            height: '100%',
            padding: '0 0.3rem',
            marginRight: '-0.3rem',
            display: 'flex',
            alignItems: 'center',
          }}
          >
            <Icon type="ellipsis" />
          </div>
        </Popover>
      }
      >
        NavBar
      </NavBar>
    </div>);
  },
});
ReactDOM.render(<App />, mountNode);

API ( 适用平台：WEB、React-Native )

Popover

Popover.Item