<Popup>组件

<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>

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值