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