ant design vue中Popover气泡卡片 修改样式无效

本文讲述了在使用Ant Design Vue开发时,如何解决在Popover组件中修改样式时遇到的 scoped限制问题,通过getPopupContainer属性调整渲染层级,并探讨了相关CSS选择器技巧。
摘要由CSDN通过智能技术生成

ant design vue中Popover气泡卡片 修改样式无效

最近,新项目用的框架是 ant-desgin-vue

用到了一个Popover气泡卡片,想要修改气泡卡片的样式。
在这里插入图片描述
而我理想状态应该是:在这里插入图片描述

于是设置css如下所示:

<style lang="less" scoped>
.showTag{
    display: inline-block;
    margin-left: 5px;
}
</style>

发现,设置无效,如果把scoped去掉就行,但这不是我想要的,我不想影响其他组件。
调试界面,发现,popover把代码渲染到了body里,这样就和我当前组件平级了。查api,发现了这样一个getPopupContainer参数,于是代码做了如下改动:

<a-popover placement="right" trigger="click"
	:getPopupContainer=" triggerNode => { 
 		return triggerNode.parentNode
 	}"
 >

getPopupContainer的作用是设置浮层渲染父节点,默认渲染到 body 上。

这样再改css样式。

<style rel="stylesheet/scss" scoped>
.navbar {
    /deep/ .ant-popover-inner-content{
         padding:0;
     }
}
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值