ant design vue中Popover气泡卡片 修改样式无效
ant design vue中Popover气泡卡片修改样式无效最近,新项目用的框架是 ant-desgin-vue用到了一个Popover气泡卡片,想要修改气泡卡片的样式。而我理想状态应该是:于是设置css如下所示:<style lang="less" scoped>.showTag{display: inline-block;margin-left: 5px;}</style
·
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>
更多推荐
已为社区贡献5条内容
所有评论(0)