100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Ant design vue Popover组件样式设置无效

Ant design vue Popover组件样式设置无效

时间:2018-11-28 05:08:15

相关推荐

Ant design vue Popover组件样式设置无效

审查元素的时候在.ant-popover-title里加上background-color:red;是有效的,但是我自己写代码的时候,这样写

/deep/.ant-popover-title{background-color:red;}

无效,折腾了半天,死活不起作用,最后查资料是把<style lang="less" scoped>里的scoped去掉,

然后再把/deep/去掉就可以了

这样做影响了其他界面,但好歹对我这个项目没啥影响,可以这样用,但还是有点风险。

查了更详细的资料/components/tooltip-cn/#API后,发现popover把代码渲染到了body里,这样就和我当前组件平级了。查api,发现了这样一个getPopupContainer参数,于是代码做了如下改动

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

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

这样再改css样式。

<style lang="less" scoped>/deep/ .ant-popover-title{background-color:red;}</style>

这样就可以了

我在我项目中的代码如下:

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