Popper

基础弹层组件

快速使用

依附元素

import Popper from "@hi-ui/hiui/es/popper"
import React, { useState, useRef } from "react"
const demo = () => {
  const PopperAttachEle = useRef()
  const [showPopper, setShowPopper] = useState(false)
  return (
    <div>
      <div ref={PopperAttachEle}>popper-attachEle</div>
      <Popper
        // 弹出层的显示隐藏
        show={showPopper}
        // 依附的元素
        attachEle={PopperAttachEle.current}
        // 点击弹出层以及依附元素以外的区域时会触发该回调
        onClickOutside={() => {
          setShowPopper(false)
        }}
      >
        <div className='popper-content'>Popper Content</div>
      </Popper>
    </div>
  )
}

无依附元素

import Popper from "@hi-ui/hiui/es/popper"
import React, { useState, useRef } from react
const demo = () => {
  const [showPopper, setShowPopper] = useState(false)
  return (
    <div>
      <Popper
        // 弹出层的显示隐藏
        show={showPopper}
        left={20}
        top={20}
        // 点击弹出层以及依附元素以外的区域时会触发该回调
        onClickOutside={() => {
          setShowPopper(false)
        }}
      >
        <div className="popper-content">Popper Content</div>
      </Popper>
    </div>
  )
}

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | -------------------------------------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | show | 弹出层显示隐藏 | boolean | - | false | | attachEle | 依附元素，会自动显示到该元素下方，并跟随自动 | HTMLElement | - | - | | container | 弹出层依赖定位的元素，也就是弹出层参考定位的元素 | HTMLElement | - | - | | width | 弹层宽度，如果存在attachEle参数且宽度未传入的情况下，会根据attachEle的宽度进行计算，其他情况请传入宽度 | number | string | bool | - | - | | topGap | 距离依附元素的上偏移量，存在 attachEle 属性时有效， | number | 0 | 0 | | leftGap | 距离依附元素的左偏移量，存在 attachEle 属性时有效， | number | 0 | 0 | | zIndex | 堆叠顺序 | number | - | 1060 | | placement | 位于依附元素的方位 | string | bottom | bottom-start | bottom-end | top | top-start | top-end | left | left-start | left-end | right | right-start | right-end | top-bottom-start(使用该属性会自动根据依附元素距离可视区域自动翻转) | top-bottom | left-right | left-right-start | bottom-start |

Events

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | --------------------------------------------------------------------- | --------------------- | ------ | ------------------- | | onClickOutside | 点击该元素外的回调方法 | function | - | - | | setOverlayContainer | 如遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位 (3.0 新增) | function(triggerNode) | - | () => document.body |