a-tooltip文字提示、a-popconfirm气泡确认框、a-popover气泡卡片

258 阅读1分钟

在Tooltip API官网有如下说明:

以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。

"ant-design-vue": "^3.2.20"

修改.ant-popover-inner-content样式

    <a-popover title="Title" trigger="click" overlayClassName="popover">
      <template #content>
        <p>Content</p>
        <p>Content</p>
      </template>
      <a-button>Click me</a-button>
    </a-popover>

使用:deep()无效。

overlayInnerStyle好像可以解决,但是版本要求是4.0

解决办法:

使用overlayClassName="popover"添加类名

<style lang="less">
.popover {
  .ant-popover-content {
    border: 1px solid #424246;
    border-radius: 9px;
    overflow: hidden;
  }
  .ant-popover-inner-content {
    padding: 0;
  }
}
</style>

这样修改基本不会产生样式污染