ant-design-vue的a-popover 改变样式的方法

最新推荐文章于 2025-04-03 09:30:04 发布

原创最新推荐文章于 2025-04-03 09:30:04 发布 · 4.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了两种解决AntDesign中Popover组件样式问题的方法。第一种是使用getPopupContainer配合自定义函数来控制弹出层的容器；第二种是通过设置overlayClassName添加自定义类名进行样式覆盖。每种方法都有其优缺点，getPopupContainer可能导致隐藏和布局问题，而overlayClassName可能影响其他页面的样式。

第一种

请添加图片描述

可以使用getPopupContainer 在这里插入图片描述

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

在style样式里面用：deep(antd的class名不知道得可以去浏览器定位copy)

缺点

deep用的多，上下左右都有可能会用到；
当你的父元素用到了overflow属性时靠近你父元素边框的popover组件会有部分隐藏，甚至会导致你父元素撑大，撑出滚动条；其次写多了deep会被老大教育

第二种

请添加图片描述

给popover添加overlayClassName属性

<a-popover
	overlay-class-name="screen-gantt-popover"
<!-- 这里可以是overlayClassName 作者由于eslint的原因 提示要hyphenated（带有连字符号的） -->
	>

然后再style里面就可以正常写样式 诶就是不写，就是玩儿！ (主要是我不知道你要的是哪个方向的，所以还是去浏览器定位copy)

.screen-gantt-popover > .ant-popover-content > .ant-popover-inner  {
    min-width: 277px !important;
    box-shadow: 0px 1px 6px 0px rgba(149,198,255,0.59) !important;
}

.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow {
    background: rgba(18, 26, 39,0.8) !important;
    border-top-color: rgba(18, 26, 39,0.8) !important;
    border-left-color: rgba(18, 26, 39,0.8) !important;
    box-shadow: -3px -3px 6px rgba(149,198,255,0.59) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}
.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow {
    background: rgba(18, 26, 39,0.8) !important;
    border-bottom-color: rgba(18, 26, 39,0.8) !important;
    border-right-color: rgba(18, 26, 39,0.8) !important;
    box-shadow: 3px 3px 6px rgba(149,198,255,0.59) !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
}