当前位置: 首页 > article >正文

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

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;
  }



http://www.kler.cn/news/341805.html

相关文章:

  • 代码随想录算法训练营第四十六天 | 647. 回文子串,516.最长回文子序列
  • Python 工具库每日推荐 【Matplotlib】
  • 需求9——通过一个小需求来体会service层的作用
  • ubuntu下载gitee库源码
  • 代码随想录day29:动态规划part2
  • 备份python运行环境
  • vue3中使用live2D
  • Echarts 图表导出为 SVG矢量图
  • 毕设 大数据电影数据分析与可视化系统(源码+论文)
  • RabbitMQ入门5—exchange参数之durability
  • 前端背景图裁剪
  • 【kubernetes】环境准备及K8S二进制安装【最新最全】
  • 古典舞在线交流:SpringBoot平台实现与优化
  • Leetcode 3312. Sorted GCD Pair Queries
  • 移动电源自动化测试中有哪些关键步骤,如何对这些步骤进行优化-天宇微纳
  • 大数据新视界 --大数据大厂之大数据如何重塑金融风险管理:精准预测与防控
  • finereport制作带刷新和滚动的明细表
  • Windows10如何关闭自动更新
  • 深度学习:循环神经网络——LSTM
  • 用Python制作数据可视化仪表盘:使用Dash与Plotly构建实时交互式仪表盘