ant design vue的气泡框样式不生效
2022-07-26 本文已影响0人
懒懒猫
原理
发现popover把代码渲染到了body里,这样就和我当前组件平级了
解决
![](https://img.haomeiwen.com/i26015574/df8078546f1b550b.png)
经过百度发现, Tooltip、Popconfirm、Popover 共享的 API方法getPopupContainer
可以设置浮层渲染父节点,默认渲染到 body 上,这样再改css样式即可。
使用实例
<!-- 当状态为启用时为停用 -->
<a-popconfirm
:getPopupContainer="
triggerNode => {
return triggerNode.parentNode
}
"
title="你确定要停用该账号吗?"
placement="topRight"
ok-text="确定"
cancel-text="取消"
@confirm="confirm(record.username, record.userStatus)"
>
<a>停用</a>
</a-popconfirm>
// 气泡框样式
/deep/.ant-popover-placement-topRight .ant-popover-inner {
...
}