问题描述:
需要给popover组件设置固定 宽高。
问题背景:
在项目中做一个基于Ant-D popover 气泡卡片组件、封装的时间面板组件的时候,遇到一个问题需要固定 popover组件的宽高。
最初尝试用 样式穿透的方式,设置 popover 样式如下:
/deep/ .ant-popover-inner-content { width: 302px; height: 239px; }
发现上面并不会生效,查找官方文档的 popover组件,在api的最下面,发现了一行小字,“更多属性请参考 Tooltip。”
最终在 tooltip、popconfirm、popover 共有的 api中发现了一个参数 overlayStyle 类型是一个对象,可以用来设置气泡的样式。( 注意,这个overlayStyle 的类型是 Object )
解决方案:
在 overlayStyle 属性中声明好对应的样式对象如下:
<a-popover :overlayStyle="popoverStyle" class="fl" :class="{'w100' : isMobileMode}"> // 省略。。。 </a-popover> computed: { popoverStyle() { if (this.isMobileMode) { return { maxWidth: '330px' }; } return this.showShortcut ? { width: '302px', height: '239px' } : { width: '630px' }; }, }
在组件初次加载的时候,指定好宽高,就能解决这个问题了。