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

news2024/10/10 19:00:59

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.coloradmin.cn/o/2202778.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【笔记】Day2.4表设计说明

主键ID一般使用bigint类型 运送类型 使用比int更小的tinyint类型 eg&#xff1a;普快代表1 特快代表2&#xff08;没写反&#xff09; 关联城市 varchar 2代表京津冀 3代表江浙沪 4代表川渝 首重和续重都有小数点 故使用double 轻抛系数都为整数 故使用int 创建时间和修改…

Perforce静态分析工具2024.2新增功能:Helix QAC全新CI/CD集成支持、Klocwork分析引擎改进和安全增强

Perforce Helix QAC和Klocwork的最新版本对静态分析工具进行了重大改进&#xff0c;通过尽早修复错误、降低开发成本和加快发布速度&#xff0c;使开发团队实现左移。 本文中&#xff0c;我们将概述2024.2版本的新特性和新功能。 CI/CD和左移以实现持续合规性 现代软件开发实…

《Programming from the Ground Up》阅读笔记:p217-p238

《Programming from the Ground Up》学习第11天&#xff0c;p217-p238总结&#xff0c;总计22页。 一、技术总结 1.C compiling p216, C compiling is split into two stages - the preprocessor and the main compiler。 注&#xff1a;感觉这个写法不好&#xff0c;因为p…

开源AI智能名片链动2+1模式S2B2C商城小程序源码与工业4.0的融合发展:机遇与挑战

摘要&#xff1a;本文探讨了工业4.0的三大主题&#xff0c;即智能工厂、智能生产和智能物流&#xff0c;分析在各主题下开源AI智能名片链动21模式S2B2C商城小程序源码与之融合的可能性、带来的机遇以及面临的挑战&#xff0c;旨在为相关产业的协同发展提供理论参考。 一、引言 …

计算机网络:计算机网络概述 —— 描述计算机网络的参数

文章目录 数据量性能指标速率带宽数据传输速率 吞吐量时延分析时延问题 时延带宽积往返时间利用率丢包率丢包的情况 抖动可用性可靠性安全性 计算机网络是现代信息社会的基础设施&#xff0c;其性能和可靠性对各类应用至关重要。为了理解和优化计算机网络&#xff0c;我们需要深…

uniapp学习(004-1 组件 Part.2生命周期)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第31p-第p35的内容 文章目录 组件生命周期我们主要使用的三种生命周期setup(创建组件时执行)不可以操作dom节点…

手撕数据结构 —— 单链表(C语言讲解)

目录 1.为什么要有链表 2.什么是链表 3.链表的分类 4.无头单向非循环链表的实现 SList.h中接口总览 具体实现 链表节点的定义 打印链表 申请结点 尾插 头插 尾删 头删 查找 在pos位置之前插入 在pos位置之后插入 删除pos位置 删除pos位置之后的值 5.完整代码…

把自己的代码安装到系统环境中/conda环境

1. 安装setuptools库 2. 创建一个如下的setup.py程序 # codingutf-8 from setuptools import setupsetup(author"zata",description"This is a nir analyse api, writen by zata", ### 一句话概括一下name"nirapi", ### 给你的包取一个名字…

小熊猫C/C++的安装使用及配置教程

文章目录 软件介绍小熊猫C下载地址安装下载完得到可执行文件选择语言阅读协议接受条款组件默认即可最好不要占用系统盘 配置-使用打开会选择主题和默认语言创建项目创建源文件编译及运行 软件介绍 小熊猫C是一个简单易用的集成开发环境(IDE)。 学校里几乎用的都是Dev C这种轻量…

【数学分析笔记】第5章第1节 微分中值定理(1)

5. 微分中值定理及其应用 5.1 微分中值定理 5.1.1 极值与极值点 【定义5.1.1】 f ( x ) f(x) f(x)定义域为 ( a , b ) (a,b) (a,b)&#xff0c; x 0 ∈ ( a , b ) x_0\in(a,b) x0​∈(a,b)&#xff0c;若 ∃ O ( x 0 , ρ ) ⊂ ( a , b ) \exists O(x_0,\rho)\subset(a,b) ∃…

自动猫砂盆“智商税”还是“真香”?2024自动猫砂盆保姆级干货

平时忙着上班&#xff0c;或者一遇到出差就要离家四五天&#xff0c;没办法给毛孩子的猫砂盆铲屎&#xff0c;导致粪便堆积太久。很多铲屎官也了解到有自动猫砂盆这种东西&#xff0c;但是生怕是智商税&#xff0c;总觉得忍忍手铲也可以&#xff0c;要知道&#xff0c;猫咪的便…

众数信科 AI智能体政务服务解决方案——寻知智能笔录系统

政务服务解决方案 寻知智能笔录方案 融合民警口供录入与笔录生成需求 2分钟内生成笔录并提醒错漏 助办案人员二次询问 提升笔录质量和效率 寻知智能笔录系统 众数信科AI智能体 产品亮点 分析、理解行业知识和校验规则 AI实时提醒用户文书需注意部分 全文校验格式、内容…

无人机之穿越机飞行注意事项

一、选择合适的场地 1、寻找空旷、无障碍物的区域&#xff0c;如大型公园的空旷草坪、专门的无人飞行场地等。这样可以减少碰撞的风险&#xff0c;确保飞行安全。 2、避免在人群密集的地方飞行&#xff0c;防止对他人造成伤害。例如&#xff0c;不要在商场、学校、体育场等人…

ESP32芯片物联网技术,咖啡机智能化升级方案,实现个性化咖啡体验

随着物联网技术的飞速发展&#xff0c;我们的日常生活正在变得越来越智能化。从智能音箱到智能家居&#xff0c;现在连我们每天早晨的咖啡也能享受到智能科技的便利。 今天&#xff0c;我们就来聊聊如何通过ESP32芯片&#xff0c;将传统的咖啡机转变为一台能够远程控制、个性化…

实际开发中,java开发的准备工作

实际开发中&#xff0c;java开发的准备工作 一、IDEA工具环境设置 1、编码设置

如何在阿里云一键部署FlowiseAI

什么是FlowiseAI FlowiseAI 是一个开源的低代码开发工具&#xff0c;专为开发者构建定制的语言学习模型&#xff08;LLM&#xff09;应用而设计。 通过其拖放式界面&#xff0c;用户可以轻松创建和管理AI驱动的交互式应用&#xff0c;如聊天机器人和数据分析工具。 它基于Lang…

zotero主页面显示的标签名与信息处的标签名不一致

问题描述&#xff1a;我在网页导入了论文之后&#xff0c;自动匹配了一些该论文的信息&#xff0c;但是很多都是空的&#xff0c;最大的问题就是找不到出版物的信息&#xff1b; 解决&#xff1a;最后发现在信息中是叫刊名&#xff0c;其中年对应的是在日期部分&#xff1b; 极…

显卡的HDMI和DP接口的区别,如何给显卡选择最佳效果的显示器

1、HDMI和DisplayPort&#xff08;DP&#xff09;的区别 在显卡接口的选择上&#xff0c;HDMI和DisplayPort&#xff08;DP&#xff09;是两种常见的连接方式。它们在兼容性、性能以及分辨率等方面存在区别。具体分析如下&#xff1a; 兼容性 HDMI&#xff1a;广泛兼容多种设备…

VScode连接服务器配置c、c++编程环境

在 VS Code 中配置远程服务器的 C/C 编程环境&#xff0c;可以使用 VS Code 的 Remote-SSH 扩展来通过 SSH 连接到远程服务器&#xff0c;并在服务器上编写、编译和调试 C/C 代码。 以下是详细的配置步骤&#xff1a; 1. 在本地机器上安装 VS Code 和扩展 安装 VS Code&#…

【测试】——测试管理工具禅道 介绍与使用

&#x1f4d6; 前言&#xff1a;测试管理工具是一种并没有占据明显份额的工具。创业公司可能根本没有测试管理工具&#xff0c;而依赖Excel来管理。中小企业可能会在开源的基础上进行定制。大厂则会自研工具或者使用商业软件。本期以国产开源工具禅道为例来进行讲解。 目录 &am…