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

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

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

用到了一个Popover气泡卡片,想要修改气泡卡片的样式。
ant design vue中Popover气泡卡片 修改样式无效_第1张图片
而我理想状态应该是:ant design vue中Popover气泡卡片 修改样式无效_第2张图片

于是设置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样式。


你可能感兴趣的:(前端框架问题总结,vue.js,ant,desgin)