100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ant-design-vue的a-popover 改变样式的方法

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

时间:2019-07-26 04:18:45

相关推荐

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

第一种

可以使用getPopupContainer

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

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

缺点

deep用的多,上下左右都有可能会用到;

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

第二种

给popover添加overlayClassName属性

<a-popoveroverlay-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;}

注意!注意!注意!

缺点

该方法要去掉 scoped 如果会影响到你其他页面慎重考虑

效果图图一为第一种方法(getPopupContainer)的结果,图二为第二种方法(overlayClassName)结果

![请添加图片描述](https://img-/fd1df1acd1e141248d9226b271e5fa40.png

如还有其他的方法请还请指教

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。