修改antdv 中 a-popover 气泡卡片样式的方法-CSDN博客

本文链接：https://blog.csdn.net/myjava_6/article/details/131935733

在AntDesignVue组件中，由于气泡卡片不挂载在app节点下，导致加了scoped的style标签无法修改其样式。解决方法是为a-popover添加overlayClassName属性，定义自定义类名，然后在不带scoped的style标签中针对该类名进行样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ant design vue中气泡卡片的挂载

发现在ant design vue中气泡卡片的挂载不是挂载在app节点下的，这时在vue组件中写的style标签里加了scoped属性时就修改不了这个组件下的气泡卡片样式，因为加了scoped只能修改挂载在app节点下的子节点的样式造成的吧。

解决办法

在template模版里的代码写法

注意事项：在a-popover里加一个overlayClassName属性，其值可以自己定义卡片类名，定义卡片类型名之后就可以在style标签里进行修改卡片的样式了。
代码如下

<a-popover
                        class="setting"
                        title="修改状态"
                        :overlayStyle="{ width: '120px' }"
                        overlayClassName="poperlay-table"
                        placement="left"
                      >
                        <template #content>
                          <p
                            v-for="(status, index) in currentStatusList"
                            :key="index"
                            class="status-content"
                            style="cursor: pointer"
                          >
                            <a-popconfirm
                              placement="topRight"
                              title="确认修改吗？"
                              @confirm="changeCurrentStatus(status.code, record.userId, record.classId)"
                            >
                              <div>
                                {{ status.value }}
                              </div>
                            </a-popconfirm>
                          </p>
                        </template>
                        <!-- <span>{{showCurrentStatus(text)}}</span> -->

                        <div class="class-user-current-status">
                          <div :class="'status' + (text ? text : 0)">
                            {{ showCurrentStatus(text) }}
                          </div>
                        </div>
                      </a-popover>

在vue的组件里再加另一个style标签时不写scoped

注意事项：在自己所定义的卡片类名里，不加/deep/深度选择，才能进行样式的修改
代码如下

<style lang="less">
.poperlay-table {
  .ant-popover-title {
    min-width: 100px;
    padding: 5px 13px 4px;
  }
}
</style>