Popover 气泡

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。

代码演示

气泡

  1. /* eslint global-require: 0 */
  2. import { Popover, NavBar, Icon } from 'antd-mobile';
  4. const Item = Popover.Item;
  6. class App extends React.Component {
  7.   state = {
  8.     visible: true,
  9.     selected: '',
  10.   };
  11.   onSelect = (opt) => {
  12.     // console.log(opt.props.value);
  13.     this.setState({
  14.       visible: false,
  15.       selected: opt.props.value,
  16.     });
  17.   };
  18.   handleVisibleChange = (visible) => {
  19.     this.setState({
  20.       visible,
  21.     });
  22.   };
  23.   render() {
  24.     let offsetX = -10; // just for pc demo
  25.     if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
  26.       offsetX = -26;
  27.     }
  28.     return (<div>
  29.       <NavBar iconName={false}
  30.         mode="light"
  31.         rightContent={
  32.           <Popover mask
  33.             overlayClassName="fortest"
  34.             overlayStyle={{ color: 'currentColor' }}
  35.             visible={this.state.visible}
  36.             overlay={[
  37.               (<Item key="4" value="scan" icon={<Icon type={require('./scan.svg')} size="xs" />} data-seed="logId">扫一扫</Item>),
  38.               (<Item key="5" value="special" icon={<Icon type={require('./qrcode.svg')} size="xs" />} style={{ whiteSpace: 'nowrap' }}>我的二维码</Item>),
  39.               (<Item key="6" value="button ct" icon={<Icon type={require('./help.svg')} size="xs" />}>
  40.                 <span style={{ marginRight: 5 }}>帮助</span>
  41.               </Item>),
  42.             ]}
  43.             align={{
  44.               overflow: { adjustY: 0, adjustX: 0 },
  45.               offset: [offsetX, 15],
  46.             }}
  47.             onVisibleChange={this.handleVisibleChange}
  48.             onSelect={this.onSelect}
  49.           >
  50.             <div style={{
  51.               height: '100%',
  52.               padding: '0 0.3rem',
  53.               marginRight: '-0.3rem',
  54.               display: 'flex',
  55.               alignItems: 'center',
  56.             }}
  57.             >
  58.               <Icon type="ellipsis" />
  59.             </div>
  60.           </Popover>
  61.         }
  62.       >
  63.         NavBar
  64.       </NavBar>
  65.     </div>);
  66.   }
  67. }
  69. ReactDOM.render(<App />, mountNode);

Popover气泡 - 图1

API

适用平台：WEB、React-Native

Popover

属性说明类型默认值
visible (web only)当前显隐状态Booleanfalse
onVisibleChange (web only)当显隐状态变化时回调函数(visible: bool): void-
placement (web only)enum{'left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'}String'bottomRight'
mask (web only)是否显示遮罩背景层Booleanfalse
overlay弹出层内容React.node-
onSelect选中某选项时的回调函数(node: any, index?: number): void-
style (rn only)设置样式Object-
triggerStyle (rn only)触发元素外围容器样式Object-
overlayStyle (rn only)弹出层外围容器样式Object-
contextStyle (rn only)最外围容器样式Object-
renderOverlayComponent (rn only)自定义弹出层的外围组件，默认是ScrollView，示例(opts) => <Cus>{opts}</Cus>(opts: any): React.Node-
name (rn only)menu 名字，用于手动触发开关 menuString-
openMenu / closeMenu / toggleMenu(rn only)用于手动开关 menu，参数为上边 menu 的 name. 使用示例见 demoFunction(name)-
更多 API 可查看 rc-tooltip (web only)

Popover.Item

属性说明类型默认值
children节点内容String/React.node-
disabled是否禁用Booleanfalse
styleitem 样式Object-
icon (web only)iconReact.Node-
value (rn only)可作为选中的条目IDstring/number-