<Popup
//控制弹窗是否可见
popupVisible={intelligentVisible}
/*控制弹窗显示位置,这三个属性是用来调整弹出框的位置和处理溢出情况的。
1. offset: [-0, -20]:用于调整弹出框相对于目标元素的偏移量。这里的[-0, -20]
表示在水平方向上不进行偏移,在垂直方向上向上偏移20个像素。
2. overflow: { adjustX: true, adjustY: true }:当弹出框在父元素中的位置发生溢出时,
通过设置adjustX和adjustY属性来自动调整弹出框的位置。adjustX设置为true表示允许水平方向上的
调整,adjustY设置为true表示允许垂直方向上的调整。
3. targetOffset: [0, -30]:用于调整弹出框相对于目标元素的位置偏移量。这里的[0, -30]表示
在水平方向上不进行偏移,在垂直方向上向上偏移30个像素。
这些属性通常与popupAlign属性一起使用,以实现更精确的弹出框位置和处理溢出情况。*/
popupAlign={{
offset: [-0, -20],
overflow: { adjustX: true, adjustY: true },
targetOffset: [0, -30],
}}
//弹窗里要弹出来的内容
popup={
<IntelligentEvaluate
intelligentVisible={intelligentVisible}
setIntelligentVisible={setIntelligentVisible}
commitContent={evaluate}
onChange={onChange}
setPolishName={setPolishName}
onNotAdmitClick={onNotAdmitClick}
isManyWords={isManyWords}
/>
}
//弹窗出现的位置
popupPlacement="left"
zIndex={100000}
//监控和控制弹窗是否可见
onPopupVisibleChange={(visible) => setIntelligentVisible(visible)}
//绑定元素,可以让其固定显示在一个地方,不会随着页面的滑动引起不必要的样式变化和bug
getPopupContainer={() => button.current as any}
//点击弹窗以外的空间不会关闭弹窗,默认是true,可以关闭。
maskClosable={false}
>
/*绑定的元素。一般设置height: 0 ,否则就会造成无论无论是否点击按钮,
都不会触发点击函数,但是可以正常显示弹窗,调用接口,显示接口内容,因为有
onPopupVisibleChange={(visible) => setIntelligentVisible(visible)}*/
<div
className={`${prefixCls}-placeholder`}
style={{ height: 0 }}
ref={button}
></div>
</Popup>
<Popup>组件
于 2023-12-11 11:58:53 首次发布