修改 antd a-popover气泡卡片弹窗背景颜色

蜡笔大杺

已于 2024-10-10 18:01:33 修改

阅读量111

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2024-10-10 18:00:52 首次发布

本文链接：https://blog.csdn.net/qq_44871531/article/details/142828397

版权

antdv 中 a-popover 样式修改不生效的问题
因为 popover 元素添加到了 body 下面，增加下面这几行代码，将 popover 添加到它原本的父级下面，然后用 ::v-deep 去修改样式就可以

1.效果图

在这里插入图片描述

2.代码

主要的代码就是

    :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }

完整代码

 <div class="singleech">
     <a-popover
        placement="right"
        v-model:open="visible"  //这行代码作用是让弹窗一直显示,方便查看元素class,修改完样式去掉即可
        trigger="click"  //这行代码作用是让弹窗一直显示,方便查看元素class,修改完样式去掉即可
        :getPopupContainer="(triggerNode) => {return triggerNode.parentNode;}">
           <template #content>
                <div class="adpopover">
                    <p class="titleText" style="font-size: 20px">1111</p>
                </div>
           </template>

          <div class="titleText" style="margin-top: 40px">000</div>
     </a-popover>
</div>

  const visible = ref<boolean>(false);
//自定义样式
  .singleech ::v-deep(.ant-popover-inner) {
    background-color: #05353f !important;
  }
  .singleech ::v-deep(.ant-popover-arrow:before) {
    background: #05353f !important;
  }