弹出效果组件

弹出效果组件是用于给指定元素的点击或者 hover 动作添加一个附着的弹出框。

特性：

• [x] 可自由控制弹出内容的渲染
• [x] 可以包含任何内容
• [x] 支持点击和 hover
• [x] 进场、出场动画
• [x] 弹出框的显示位置
• [x] 支持在 Modal 中使用
• [x] 支持自调整位置，不能超出屏幕之外
• [x] z-index

使用方式：

import Pop from '@sinoui/pop';

export default function PopDemo() {
  return (
    <Pop render={() => <div>这是弹出的内容</div>}>
      <div>这是内容</div>
    </Pop>
  );
}

Pop 组件有以下属性：

| 属性名 | 属性类型 | 属性说明 | | ------------------------ | --------------------------------- | -------------------------------- | | render | ({close}) => React.ReactNode | 渲染弹出内容的函数 | | children | React.ReactNode | 应用效果的内容 | | className | string | 应用到容器的类 | | style | React.CSSProperties | 应用到容器上的样式 | | popContentClassName | string | 应用到弹出框上的类 | | popContentStyle | React.CSSProperties | 应用到弹出框上的样式 | | popAction | 'click' 或者 'hover' | 弹出效果的动作类型。默认为 click | | verticalPosition | 'top' 或者 'bottom' 或者 'center' | 弹出框在垂直方向的位置 | | horizontalPosition | 'left' 或者 'right' 或者 'center' | 弹出框在水平方向的位置 | | verticalOrigionPosition | 'top' 或者 'bottom' 或者 'center' | 弹出框定位时垂直方向的原点位置 | | horizontalOriginPosition | 'left' 或者 'right' 或者 'center' | 弹出框在水平方向的原点位置 | | innerRef | (dom?: HTMLElement) => void | 引用 dom 元素 |

弹出框显示的默认位置：

• verticalPosition: 'bottom'
• horizontalPosition: 'left'
• verticalOrigionPosition: 'top'
• horizontalOriginPosition: 'left'

关于弹出框的位置

弹出框的位置是弹出框的原点相对于参照物的原点重合定义的。verticalPosition和horizontalPosition是定义参照物的原点的位置，verticalOriginPositon和horizontalOriginPosition是定义弹出框的原点位置。如：

定义参照物的原点位置为参照物的顶点：

<Pop verticalPosition="top" horizontalPosition="left" />

定义参照物的原点位置位于参照物的顶部并且水平居中的位置：

<Pop verticalPosition="top" horizontalPosition="center" />