popover 气泡

弹出式的气泡菜单

Props参数

名称	类型	是否必传	默认值	描述
visible	boolean	否	-	是否显示
data	{ text: string; iconfont: IconFontName }[]	否	-	数据
theme	keyof typeof EPopoverTheme	否	-	类型
onClick	(value: { text: string; iconfont: IconFontName }, index: number) => void	否	-	点击事件

示例

import { View } from '@tarojs/components'
import { useState } from 'react'
import MMPopover from '~/components/popover'
import IconFontName from '~/components/icon-font/const'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
import MMButton from '~/components/button'

export default () => {
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)

  function onClick(item) {
    // eslint-disable-next-line no-console
    console.log(item)
  }

  return (
    <MMPageContainer title="气泡">
      <PageDemoBlock title="基础">
        <View style={{ position: 'relative' }}>
          <MMButton onClick={() => setVisible((pre) => !pre)}>点击我</MMButton>
          <MMPopover
            visible={visible}
            onClick={onClick}
            data={[
              { text: '添加朋友', iconfont: IconFontName.Add },
              { text: '发起群聊', iconfont: IconFontName.Add },
              { text: '扫一扫', iconfont: IconFontName.Add },
              { text: '二维码', iconfont: IconFontName.Add }
            ]}
          />
        </View>
      </PageDemoBlock>

      <PageDemoBlock title="暗黑">
        <View style={{ position: 'relative' }}>
          <MMButton onClick={() => setVisible2((pre) => !pre)}>点击我</MMButton>

          <MMPopover
            visible={visible2}
            theme="dark"
            onClick={onClick}
            data={[
              { text: '添加朋友', iconfont: IconFontName.Add },
              { text: '发起群聊', iconfont: IconFontName.Add },
              { text: '扫一扫', iconfont: IconFontName.Add },
              { text: '二维码', iconfont: IconFontName.Add }
            ]}
          />
        </View>
      </PageDemoBlock>
    </MMPageContainer>
  )
}