ant design vue的气泡框样式不生效

2022-07-26  本文已影响0人  懒懒猫

原理

发现popover把代码渲染到了body里,这样就和我当前组件平级了

解决

2)2FZ`[VS]`Y8WB}SJ37~51.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 {
   ...
}
上一篇 下一篇

猜你喜欢

热点阅读