使用Ant-D for vue的popover气泡卡片时设置卡片宽度的问题


问题描述:

需要给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' };
      },
}

  在组件初次加载的时候,指定好宽高,就能解决这个问题了。

有道词典
class="fl" :cl ...
详细 X
类=“fl”:类= "{借此宣传:isMobileMode}”


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM