ant design vue中修改组件popover气泡卡片宽度及标题下面的border的最小长度限制问题

背景

在项目中需要修改使用到了ant design vue UI框架中的popover气泡卡，需要修改卡片整体宽度，使用了overlayStyle官方提供的API来这样:overlayStyle="{ width: ‘120px’ }"修改宽度，但发现了修改不了下面一条很线宽度的问题。问题如下

代码template里

<a-popover
            class="setting"
            title="修改状态"
            :overlayStyle="{ width: '120px' }"
            >

调试界面，发现，popover把代码渲染到了body里，和当前组件平级修改不了，在官方文档中有个APIgetPopupContainer，它的的作用是设置浮层渲染父节点，默认渲染到 body 上。

解决办法

给代码添加了getPopupContaine API做了如下修改

// template里
<a-popover
            class="setting"
            title="修改状态"
            :overlayStyle="{ width: '120px' }"
            :getPopupContainer=" triggerNode => { 
              return triggerNode.parentNode
            }"
            >

style里

<style lang="less" scoped>
.class-attendance {
  /deep/ .ant-popover-title {
    min-width: 100px;
  }
}
</style>

调试查询样式

修改成功后

参考：https://blog.csdn.net/weixin_42365757/article/details/125050962