背景
在项目中需要修改使用到了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